Responsive typography

Responsive typography boils down to:

1. Relative font size
2. Active white space
3. Screen friendly line height
4. Clear colour contrast
5. Discern text and images

So many people have written great things on this subject, but I find these points in my notes and wanted to get them down.

Update – Hyperlocal chat project

We’ve been working on a conversational UI for news and information with Trinity Mirror Regionals.  The idea for a product has emerged from that work. Here’s an attempt to show where we are up to at the moment.

Introduction

We are creating social objects from a neighbourhood’s existing infrastructure which citizens can converse via SMS, Twitter, Telegram and other messaging services to “get in the know” about a specific place.

Arndale Postbox on Twitter

Our approach goes beyond conventional approaches to open data such as data visualisation, maps, etc and towards humanised suggestions that prompt and guide individual action. The social object speaks in the first person, answering questions as part of a dialogue in a different context for journalism, ie next to friends and other services in SMS and chat apps.

Questions

The main questions are:

  1. How can we make the city more searchable and query-able for citizens to help them make the best decisions in their day-to-day lives?
  2. How can a news organisation become part of the fabric of the city?
  3. How can we build a service with a high standard of ethics and integrity, especially with regard to personal data.
  4. How can we make money?

The two key challenges are acquisition and retention. Hyperlocal news is helpful because it gives a reason to follow and excuse for the service to remind you it exists once every day or two. The more fun features can be built on top of that core interaction.

The other questions are around the nature of the objects – single or multiple use, spoke only when spoken to or listening and push out? And how do we make people aware of the services available? This is where being embedded in a city will help – stickers, posters, etc – and having a media company on board – adverts, promos, etc.

Status

ArndalePostbox

A general-purpose Twitter bot that responds to a variety of commands. The main problem here is how to let people know about the range of possible commands available.

PiccadillyWall

A single-purpose Twitter bot that tells you about where to get a burger in the city centre.

Details

Chat apps such as WhatsApp, Telegram, WeChat and Viber are becoming more popular than social networks such as Twitter, LinkedIn, Facebook, and Instagram. News organisations need to work out ways to deliver valuable, important, original journalism through this new medium. But it’s not just about going where people are. At the heart of our product is the idea of journalism as a conversation. Rather than simply driving traffic to a news organisation’s website, we aim to provide as much information as possible as part of a conversation inside the messaging app. That means focusing on the important local questions people want news organisations to answer to make their lives better. It also means getting beyond the traditional article as the atomic unit of news towards structured data and dialogue.

Editorial

Designing a trusted automated companion with an appropriate personality to deliver news and information will be a big challenge but also a great innovation if successful.

We will focus on local news and information which would be interesting and useful to people living and working within the neighbourhood of the social object. The most obvious questions are around daily information (weather, transport, etc), hyperlocal news, service discovery (restaurants, cinema, etc) and civic information (crime, schools, planning applications, etc). We’ve started exploring these areas for the initial prototypes by answering the direct questions of citizens.

Another area we are starting to explore is the social object as a nexus for local news and information pulling in local tweets, images, mentions, etc, analysing them and publishing a summary based on that information. For example, we are collecting all tweets with “I feel” or “I am feeling” within the area of the ArndalePostbox, doing sentiment analysis and considering how to use this information. In this way, the social object becomes a witness to history, building up a unique archive of media around a particular area which would otherwise be lost behind rate-limited APIs.

Another area to explore is how we can encourage sharing and encounters in the area. How can we catalyse relationships between people sharing the same physical space and time and then get out the way? The conversational medium makes it natural for people to respond. We’d like to design and develop a service that provides ways for citizens to talk about their neighbourhood and perhaps even collaborate on complex decisions such a planning applications without leaving their messaging app of choice.

Technical

The main technical innovation and challenge is to build a coherent, accessible and consistent service on top of existing services and without expensive hardware. There isn’t an app, user logins or even much of a website – everything runs on top of other services through a conversational interface. The chat engine itself is quite primitive at the moment. So far we’ve used the tone and structure of the conversation to develop the experience. It doesn’t involve complex natural language processing nor does it detect and account for context changes in user inputs. We are starting to develop an approach to handling errors and null responses appropriately, preferring to be “as smart as a puppy” rather than trying to respond intelligently to everything. These are points we’d like to explore and develop further, perhaps allowing users to have extended conversations, as well as customise the service to suit their needs over time.

Another innovation will be to create the illusion of a connected object without the usual dependence on electricity, radio, etc. By adopting existing objects in the city, we can bind the experience to a physical object with a location, providing users with a mental model and fixed location for the interaction. We can get many of the benefits of a connected object without the associated issues and expense.

The product

The product will likely consist of:

  1. Conversations answering questions people have about the city as well as ways to gather and collate information from people
  2. A chat system to manage these conversations, including ways to see conversations and monitor metrics such as number of conversations, unique users, etc.
  3. Adapters for various messenger apps
  4. A collection and analysis system to gather data such as local tweets, images, etc.
  5. A push notification system to send out this information to users
  6. A way for users to personalise what they receive
  7. Ways to make people aware of the service and what it can do, e.g. posters in the city, adverts in the paper, etc.

Similar projects

Here’s a good summary of chat UIs.

Chat UI

  1. https://angel.co/assist
  2. https://digit.co/
  3. https://getpurple.io/
  4. http://www.brianlovin.com/design-details/quartz-for-ios
  5. http://www.hellolamppost.co.uk/

Hyperlocal

  1. http://maps.latimes.com/neighborhoods/
  2. http://berglondon.com/projects/schooloscope/
  3. https://www.everyblock.com/
  4. https://lasttramfrom.co.uk/

Service discovery and information in the city

Previous approaches to providing physical information points in a city revolve around kiosks with touch screens. These are expensive and are proven to be under-utilised. If you create a mobile app for local news and information, a user has download it, limiting the audience and keeping the entire experience tied to the screen. We prefer to build on top of existing infrastructure and technologies, stitching together existing services with established communities to create valuable new services in the city.

Conversational UIs and bots for news and information – Part 3

After exploring the possibilities of SMS, we moved to Twitter for the next stage of the project. This decision was mainly driven by cost: MEN would have to pay for Twilio (the service which powers the SMS functionality) and it would be difficult to recoup that money or justify spending it in the first place.

As it turned out, Twitter was an excellent medium for this kind of interaction. The character count enforced focus, while the idea of an inanimate object in the city sending a Twitter post somehow seemed more convincing than an SMS. The activity was embedded in an object in the city which spoke in the first person, expressed itself through Twitter and even had a glimmer of personality.

The focus of this sprint was being useful, which involved answering as many possible questions as possible and then testing them with users to see which ones they actually did find useful.

Is it going to rain?

We started off with the weather. Rather than churning out a general weather forecast we decided to try to answer the question, “Is it going to rain in the next hour?” We took the detailed forecast from forecast.io, examined the probability and intensity of rain in the next hour and used it to answer the question. It worked quite well:

Is it going to rain?

What’s the news around here?

The news also worked well on Twitter thanks to the cards display.

What’s the latest news?

The medium exposed problems in the content itself: it wasn’t specific enough or regular enough to power this system satisfactorily. The MEN is taking on a city centre blogger, so there will be more relevant content in the future, but the conversational UI does enforce the idea of specifically answering user needs – it’s a question / answer format after all. For this to work well, the content would need to be structured around specific locations and taxonomies. If it was tagged by things like type or mood, we could start to experiment with allowing the user to customise the service by replying to the Twitter post, which opens up all sorts of interesting possibilities.

What’s the most popular news around here?

We used the Chartbeat API to get the local article which is being shared the most on Facebook, Twitter, etc. It worked quite well, although the wording “hottest” story needs to be changed to accommodate all possible stories.

What’s the most popular story?

Crime statistics

The API at http://data.police.uk has lots of information about specific crimes as well as more general statistics. One option is to show specific crimes at a particular location along with their outcomes. We combined the details such as location, type of crime and the outcome for a single incident into a sentence. Tweet “random crime” and the postbox will reply with one of thousands of crimes from December 2014 that actually happened nearby.

Random crime

Each tweet gives you a sense of what crime incidents happen in the area as well as their outcome. We felt the randomness reflects – in limited ways – the nature of crime itself. I urge you to try it for yourself.

The general statistics didn’t work quite so well. The idea was that by comparing statistics such the crime rate and total crimes to neighbouring areas you would get a sense of how safe a place was. The city centre’s small population gave it a crime rate of 84.43 and using the total crimes wasn’t easy to convey in a single tweet. There’s still lots to explore with this data.

Is it safe?

Election

The general election was coming up as we were working on this sprint so we decided to try incorporating information about the candidates from YourNextMP. It would have been good to find out more about the candidate for a particular party, but the fragility and weakness of the conversational UI emerged since it’s difficult to inform a user about all the different parties in a single tweet. So we settled for random, giving users a broad sense of which candidates were standing and perhaps exposing people to less-well-known candidates.

Who can I vote for?

It was also difficult to convey the distinction between this is who you should vote for and this is who you could vote for, since the tweet was not a recommendation.

Information gathering

Having an extended conversation was always going to be tricky, but we tried it as a way of gathering interesting subjective information from people about their neighbourhood. We asked questions about the neighbourhood and showed someone else’s answer along with the next question.

Let’s talk

There were all sorts of problems here including needing to type “answer” to keep the conversation going, problems around the possibility of rude words from mischievous users and the general clunkiness, but it might be worth exploring in different ways in the future.

Service discovery

The final conversation used information about burger restaurants from an MEN article to provide recommendations of a place to eat. At the moment, the suggestion is random:

Service Discovery

You get details about the rating – poor, not bad, OK, good and great – as well as the cost of a burger and directions from the postbox. This service was the most popular by far as well as the easiest for people to understand, so we are going to work on improving it in the next sprint.

Conclusions

It was a great sprint exploring a range of different directions with good reaction from users in general to the concept. Here’s some of the things we learnt:

  • The conversational UI feels useful and provides something different to other ways of interacting with MEN.
  • The conversational UI is flexible and transferable – SMS, Twitter, WhatsApp, etc may have different affordances – but creating content in a general conversational format means the engine could be used to run different outlets without too much extra effort.
  • The conversational UI creates an interesting interface on top of various city APIs which would otherwise be difficult to access. Lots of editorial and data work could be done to create useful and interesting information which answers a specific need, e.g. rain, crime. Other possible sources include school data, census data, transport information and sensor data.
  • The first person framing could be a good place to explore presenting stories by emotion, e.g. awe-inspiring, emotional, positive and surprising.
  • There are interesting possibilities for gathering information by mixing automated replies along with routing to a human elsewhere.

What next?

Service discovery was by far the most popular function with users. They immediately grasped the idea and thought it was useful. So we are going to create a new Twitter account for the Piccadilly Wall in the city centre and use it to find nearby burger restaurants. People will be able to filter the information, eg cheapest, best, nearest, random, cleanest using the command first followed by modifier, ie ‘burger cheapest’.

We are also going to explore the commercial possibilities. What if a person had to retweet the recommendation to get a discount? The place would get publicity to the person’s followers and it would be unrepeatable, i.e. you need the retweet on your timeline to get the discount.

There were also some technical issues around JSON parsing errors, repeated tweets and character counts which we hope to work on to improve the experience.

It’s been great to work on this project which is not over yet. Thanks to the Manchester Evening News for the opportunity. If “designing for messaging” does “become a discipline as important as responsive design”, we hope to be at the forefront of these developments, blending writing and programming to create new experiences for 21st-century journalism.

This post is part of a series about a project exploring conversational UIs for news and information to help Manchester Evening News become part of the fabric of the city.

Part 1
Part 2
→ Part 3

Conversational UIs and bots for news and information – Part 2

Hubot is a “customisable, life-embetterment robot” created by Github. They wrote it to automate a range of activities in their company chat room. It’s open source, written in CoffeeScript on Node.js, can be deployed on Heroku and has lots of external scripts written by users. For all these reasons, we decided to use Hubot as the basis for our project.

It didn’t take long to get Hubot up and running with the Campfire. The first version responded to a few simple commands. It pulled in the latest news from the MEN’s RSS feed, sent a random old image from The Manchester Local Image Collection at the Central library and got the local weather.

We chose the Central Library as an exemplar because it was a recognisable building in the city centre and the MEN had a topic page for it.

We spent a while scraping the articles from the MEN topic page and doing various simple things such as the word count, the latest article and the oldest article. We ended up with something like this:

MEN has written 15,626 words about me in the last 7 months and a human would take about 63 minutes to read them. That’s like reading The Communist Manifesto (11,772 words) which Marx and Engels worked on at the nearby Chetham’s library in the 1840s. The latest article was 2 days ago. The oldest article was 7 months ago.

The idea was to connect the current information to interesting things in the city’s history. It didn’t quite work for a variety of reasons including the fact that Manchester apparently has an oral rather literary tradition making it trickier to find a range of books to reference. An interesting diversion nevertheless.

Moving to SMS

In sprint 2 we changed the adapter from Campfire to Twilio, so someone could interact with the system using SMS.

Local news worked well. The interaction felt natural and useful, providing value beyond any existing service and sitting conceptually somewhere between the web and a newspaper. It surfaces neighbourhood articles which might be lost in other mediums, e.g. web, Twitter which focus on latest.

News via SMS

Weather was OK, but it felt a bit pointless. It needed to be more useful, unique and specific. Other apps do the weather better. We wondered if perhaps a specific question would work, e.g. is it going to rain in the next hour?

Weather via SMS

A bit of personality worked well such as knowing the time of day and the weather and responding accordingly, but having menus inside the application did not work and felt a bit confusing and wasteful.

Personality and options

Tentative findings

Lots of things came out of this work. It’s become quite common now, but thinking through making really is important in this type of project. We discovered practical issues such as no picture messages (Twilio MMS is US/Canada only), the potential cost to the user (could feel like “feeding a metre” for users without text-inclusive plans) and the cost to MEN (at $0.04 to send and $0.0075 to receive an SMS is the interact valuable enough?). We also got used to some of the affordances and qualities of SMS as a material. People don’t usually sit and wait for a reply with a text message. They text and receive texts on the move meaning the initial premise of standing in front of an object could be going against the grain. We also discovered that general information, such as the Central library guided tour, is not useful or compelling enough to work in this context.

Material affordances

A quick chat with Tom Armitage, who worked on Hello Lamppost, helped to clarify some of the important conclusions to be drawn here.

  • SMS tends to be an intimate space usually reserved for messages from friends. Though companies and services are encroaching, it is still a private space with particular opportunities and issues.
  • There’s no room for extended, light conversations because it is too expensive and maintaining attention could quickly become a problem. Each message must be useful, dense and meaty.
  • No room for menus or instructions inside the application. We have to make the first text count by making the user choose options in initial text and move the prompts with instructions outside the application.

The conversation is probably going to follow a shape like this:

The shape of a conversation

This shape also led us to explore what to do with the secondary interaction. Could we gather information from user? Could the user customise the service by responding to the first SMS with those preferences remembered so that the service improves over time, a bit like – as Tom pointed out – the homotropic newspaper-vending robot in Philip K Dick’s novel The Game-Players of Titan?

In the end, the focus came down to being useful. Sprint 3 would focus on user needs with a playful personality. The system could become a convenient way to access the many APIs and data about the city. We would explore the usual suspects such as neighbourhood news, weather, travel delays and departures and open data such as neighbourhood statistics and census information as well as whether it was a good way to gather information from users.

We also decided to move from SMS to Twitter to avoid the question of cost to the user and the MEN.

This post is part of a series about a project exploring conversational UIs for news and information to help Manchester Evening News become part of the fabric of the city.

Part 1
→ Part 2
Part 3

Conversational UIs and bots for news and information – Part 1

The last couple of years have seen some great projects exploring different uses of technology and the city. Hello Lamp Post, which took place in Bristol during the summer of 2013, was particularly exciting. In case you haven’t seen it, here’s the idea: people send a text message to an object around the city such as a lamppost or postbox and then become part of a conversation with other people who have done the same. The main point here is that the city’s inanimate infrastructure becomes the conduit to layers of information, stories and other people without those objects actually being connected to the network.

We were keen to explore this idea in the context of news and information. Imagine if you could build up detailed maps and information about demographics, crime, housing and schools (all from public sources) as well as timely information such as what’s on and what’s happened and then people could interact with this wealth of information about specific locations through the city’s infrastructure in playful and engaging ways. Add to this elements such as sensors, e.g. Smart Citizen project with FutureEverything, and there are some very rich and exciting things to explore – air composition (CO and NO2), temperature, light intensity, sound levels, and humidity. That was the pitch. The Manchester Evening News were also keen on the idea – in particular, how it could be used to help a news organisation to become part of the fabric of the city.

Traditional approaches

There’s some existing approaches to providing these kind of services and information.

  • Mobile app – User must download it. Limits audience. Keeps the experience with the screen.
  • Information kiosks / touch screens – Expensive and proven to be under-utilised.

Making inanimate objects social and connected

If we give the illusion of a connected object using existing city infrastructure and build a conversational user interface which anyone with a phone could engage with, we could in theory avoid the problems of the traditional approaches.

These objects are rooted in a particular location, so we can provide neighbourhood-specific content without any geolocation wrangling. Everybody has SMS, so there’s no friction, such as go to the App store and download this app – before a user can even begin. The framing premise is also convincing: these object sit in the city and are witnesses to the changing face of the city, its history and the activities taking place there. In the end we came up with a range of possible activities.

Possible opportunities for interaction

  • Neighbourhood news – Specific news and information for a particular area
  • News archives – Historical news and images revealing the city’s history
  • Service discovery – What’s around me? What can I do? eg cinema listings, restaurants, etc
  • Ambient and other data – traffic, crime, sensors data such as noise and air quality
  • Civic expression – relationships between citizens and their city

Project Aims

So we decided to build some prototypes to explore:

  • Will users interact in this way? Design of conversation user interfaces and social objects and reactions to them
  • Is it useful? Are these encounters different or better than simply using a website or app?
  • Is it an effective gateway to MEN content? Does MEN have the right kind of news of information for this approach?

This post is part of a series about a project exploring conversational UIs for news and information to help Manchester Evening News become part of the fabric of the city.

→ Part 1
Part 2
Part 3

Leeds Creative Labs – Hepworth Edition

I wrote this post for the Leeds Creative Labs – Hepworth Edition where it was published. I’m also posting it here for archiving.

Here’s a picture of our excellent team: Steve Manthorp, Louise Atkinson, Joanne Armitage and myself.

hepworth-leeds

We roved far and wide in previous meetings, leapfrogging from one idea to the next, careful not to kill anything with even the whiff of goodness. But with the deadline just over a month away, the next two meetings at the School of Music in Leeds were time to focus. As it turned out, four strands emerged quite naturally, each around a certain aspect of the object, its place in the world and its relationship to the gallery and the audience.

  1. The iterative object is about encouraging people to re-work and re-use works of art, to “fork” them (in web parlance) and do their own thing with the original artworks as the basis. Monkey Jesus cropped up. Cecilia Gimenez’s attempt to restore a fresco by Elias Garcia Martinez was derided at first but has become an attraction in itself. What would happen if we provided people with a framework to encourage this kind of behaviour with Hepworth’s sculptures?
  2. The venerated object pokes at barriers – physical and otherwise – which can placed between the viewer and a work of art. Consider an object encased in glass which becomes gradually more opaque as more people look at it. Or even one which would be destroyed if viewed too many times. Taking things to extremes helps to highlight how things are at the moment, to understand the current situation and try to change it. The practical ways we could make this happen – such as electrochromic glass and Sonte glass – also made interesting discussions.
  3. The decontextualised object is crammed with hyped technology such as 3D printing and computer vision, but at heart it’s about trying to bring some of the qualities and affordances of the web to our physical interactions with works of art. Most good gallery and museum websites have ways to explore the collection, placing an artwork in context of its metadata such as artist, country, date, materials, period, etc. Lots of people are already scanning works of art. What would it be like if people could handle 3D prints of works of art and be presented with relevant information projected around it?
  4. The unrealised object plumbs the depths of the Hepworth archives for sketches, notes and other fragments which the artist did not make into sculptures. What if we could bring those works off the page and into the world?

Hepworth Creative ideas

These ideas started to hang together quite nicely. In each case we picked up on stuff which is already happening and tried to create a framework which would encourage that behaviour and help people present it back to the world. The idea of “open source” kept cropping up as a model for collaboration and co-creating. Perhaps an even better one is “view source”. Being able to view source on a HTML page is a vital part of seeing how a webpage is constructed, copy and pasting it and using it yourself. This approach seem to be at the heart of each of our explorations – what would the ability to “view source” look like for sculpture, what behaviours would it encourage, would they be worthwhile? Come along to the Hepworth on 4th June to find out.

Web APIs – Learning lunch at Hacks/Hackers MCR

hackshackers web apis lunch

We tried something different this time. Inspired by a journalist called Noah Veltman, we put on a HacksHackers Manchester “learning lunch”. We hope it will be a way for people to learn about and discuss important topics for journalism in the 21st century.

The first one was on the subject of web APIs. An API (Application Programming Interface) is a way of getting information out of a system without having to know all the details about how the system works. Everything from Twitter to Yelp to Google Spreadsheets has an API and we looked at:

  • the basics of how web APIs work
  • why you might want to use them
  • how you can use them without doing any programming
  • Popular APIs

We booked some tables at Ziferblat on Edge Street in the Northern Quarter, a venue which charges 5p a minute per person. It includes superfast Wi-Fi, unlimited free coffee, tea, soft drinks, waters, cakes, biscuits, toast, savoury snacks and cereals. It was a good session.

Here’s the slides from the talk.

Update

Here’s a list of web APIs that don’t need authentication making them easier to mess around with.

Hack the election at Hacks/Hackers MCR

Hack the Election

The fourth Hacks/Hackers Manchester was about the general election. How can we make the upcoming general election more interesting to young people and encourage them to use their vote? Can we use games, apps and other tools to engage them in the democratic process or just to make it more fun?

Here are my notes from the event.

First up was Beth Ashton, Social Media Editor at MEN, who outlined how for the newsroom had come since the last election. She also talked about some of the planned coverage including the Manchester Manifesto, an online poll on local and national issues which had over 5,000 respondents.

Next up was Francis Irving, CEO Scraperwiki. He’s a programmer and activist who has built what he referred to as “disruptive, civic tools” such as YourNextMP and ElectionLeaflets.org.

He went through various points from Agitprop Àgogo, a set of posts by Tony Bowden, mySociety‘s “international agitator” outlining mistakes and opportunities in civic technology. It’s a great site and well worth exploring in depth. Here’s a few that stood out:

To end we had Dan Hett, a games developer and livecoder who works at the BBC. He gave an excellent talk on his approach to work:

  • Restrictions are good. Not having much time or money can be to your advantage.
  • If it’s stupid but it works, it’s definitely not stupid.
  • The only valid test is other people. Get it working quickly then iterate.
  • Stay focused. Remember your objective. Don’t get too attached.
  • Choose your weapon wisely. Use what your know.
  • FINISH

A great evening with much to mull over. Thanks to all the speakers.

Maps – Lightening talk at Hacks/Hackers MCR

I did a quick introduction to digital maps at Hacks/Hackers Manchester in November. Here’s the instructions and links for reference.

Geocoding

A quick and simple process for getting the latitude and longitude for a column of addresses.

  1. New Google spreadsheet – Columns: Location, lat, lon
  2. Tools->Script Editor
  3. “Create new project”
  4. “Blank Project”
  5. Paste in this script – https://gist.github.com/robertocarroll/a819e8b625d73068bc15
  6. Publish->Deploy as Web App
  7. Spreadsheet -> select rows -> Macros-> Geocode Selected Cells Worldwide
  8. Each address should now have co-ordinates

Export

Geojson is a good format for the data. It is flexible and allows you to add your own data to the structure. It’s quite easy to read:


"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-1.7895799,
53.5716481
]
}

But it can be inefficient with large data sets and polygons (consider Topojson if project can work with modern browsers <IE8)

To export:

  1. Tools -> Script Editor
  2. “Create new project”
  3. “Blank Project”
  4. Paste in this script -https://raw.githubusercontent.com/mapbox/geo-googledocs/master/MapBox.js
  5. Publish->Deploy as Web App
  6. Spreadsheet -> select rows -> Geo -> Export

Display

  1. Try using http://geojson.io
  2. Cut and paste the geojson data exported above into the text window.
  3. Your points will appear on the map
  4. Table view is good to see and scan your data
  5. Use Github pages – free hosting and version control. Update the data using http://geojson.io
  6. Lots of ways to customise how the map looks and behaves, eg Tilemill (no programming skill required) or Mapbox JavaScript API (you need to know some JavaScript)

Tutorials

Data sources

Interesting examples

Digital maps tend to follow certain formats, but these examples show different and interesting approaches:

Filtered #2

Here’s a medley of curious threads we have pulled into our browsers this week.

1.
Una found a kind of a morbid one but fascinating article about what happens to your online identity after you die.

2.
She also discovered the world’s first light art museum, the digital art renaissance and redesigned parking sign. Yes, finally!

3.
Rob’s discovered Longplayer, a one thousand year long musical composition. The Data Retention and Investigatory Powers Bill made it through parliament in the UK despite lots of people (myself included) writing to their MPs. Ho hum. We’ll have to find other ways to defend our rights to privacy, such as this online privacy pack courtesy of Reset The Net.

Filtered #1

Here’s a selection of what’s sparked our curiosity, piqued our interest and made us shudder (almost) with delight this week.

Una liked the way the Arrels Foundation have created a collection of typefaces based on the handwriting of homeless.

She also enjoyed this talk about the story of Airbnb and the growth of the sharing economy.

And finally from Una: a video of Tina RothEisenberg talking about side projects which turned into “labors of love”.

The Internet with a Human Face

The Internet with a human face

I found much to chew over in this great talk by Maciej Cegłowski (of Pinboard) from Beyond Tellerrand in Düsseldorf, Germany. Here’s a few choice morsels:

a lot of what’s wrong with the Internet has to do with memory. The Internet somehow contrives to remember too much and too little at the same time, and it maps poorly on our concepts of how memory should work. […]

One reason there’s a backlash against Google glasses is that they try to bring the online rules into the offline world […] Google’s answer is, wake up, grandpa, this is the new normal. But all they’re doing is trying to port a bug in the Internet over to the real world, and calling it progress. You can dress up a bug and call it a feature. You can also put dog crap in the freezer and call it ice cream. But people can taste the difference. […]

These big collections of personal data are like radioactive waste. It’s easy to generate, easy to store in the short term, incredibly toxic, and almost impossible to dispose of. Just when you think you’ve buried it forever, it comes leaching out somewhere unexpected. […]

One of the worst aspects of surveillance is how it limits our ability to be creative with technology. It’s like a tax we all have to pay on innovation. We can’t have cool things, because they’re too potentially invasive.

I also enjoyed this talk on generalists and trans-media by Frank Chimero which gave me hope as a incurably curious generalist lurching from interest to interest and feeling inadequate in the face of specialists.

I still believe that:

Major innovation comes from the unexplored no-man’s-land between the disciplines

– Norbert Weiner

and point anyone in doubt in the direction of James Burke’s dConstruct talk from 2012.

Finally, here’s a great article about “Bots of conviction” with some interesting guidance on creating Twitter bots which have meaning and are effective for protest.


End of transmission

On a device-agnostic approach

2010

Only a few years ago, most people went online using a desktop or a laptop.

Desktop computer
CC Image courtesy of Rakesh Ashok on Flickr

Today and beyond

Now people use a myriad of devices over a varying connections summed up as “hostile browsers, tiny screens, slow connection speeds, touch inputs

Device lab

CC Image courtesy of Jeremy Keith on Flickr

2017

Tablets and smartphones will make up most of the sales of connected devices

Worldwide connected device forecast

Image from IDC

A mobile world

Mobile is often the only point of internet access in some parts of the world

Mobile's share of webviews around the world

Image from We Are Social

Are we building a digital product for yesterday or tomorrow?

Monthly active users for mobile and non-mobile

See this post for lots more stats

Traditional approach

Design and build desktop site first – consider this the “complete version”. Then consider a mobile site – slimmed down version of desktop version – either as separate site or using media queries – “responsive design”

  • Bad for users – Penalise them for visiting site on a smaller device when most people want full access.
  • Painful to maintain – No easy or coherent evolution of design

What if we turn it around?

Make the product:

  • Work well at many different screen sizes
  • Built for speed and performance on many devices / connection speeds
  • Work for touch screen and even “no-screen” (accessibility/APIs etc)
  • Promote content over navigation

Mobile first is a bit misleading

It’s really about starting to design from the content outwards.

Device agnostic

Content, presentation, interface – Reduce to the minimum amount necessary

  • Forces you to focus and prioritize by embracing constraints
  • Ensures you don’t have to maintain separate sites
  • Serves your users in countries with poor connections by default

Different devices and poor connections are not after-thoughts: they are at the heart of the product.

Progressively enhance for particular devices only when evidence of demand exists.

Data structures and editorial / content decisions are the biggest issues. Technical and design issues are secondary.

If we think about the content first, working on any device, all other considerations slot into place.

Hierarchy of content needs

Some ways of prioritising and thinking about content in a device-agnostic project:

  1. Access
  2. Legibility
  3. Ease of comprehension
  4. Relevance – to the need, moment, interests, behaviour, and personal history
  5. Everything else: Later access, ease of reference, etc
  6. See this post on responsive web publishing for more details.

ICC Alpha is live

Apologies for the lack of updates here. Exciting news:

ICC Alpha, a prototype which contains ideas and solutions for some of the most important needs of ICC website users, is now ready.

It is by no means complete, but we are releasing ICC Alpha now because we want to hear your comments about the approach that we are taking.

If you are interested in reviewing ICC Alpha and providing feedback, please get in touch and we will send you the details.

Your comments and thoughts will help us to improve the new website.

ICC Alpha – Competitor review

We’ve looked at lots of other websites in the field of international justice and a few beyond to find interesting and exciting stuff. Suggestions have come from the website survey, interviews, conversations and a blog post.

Here are some of the things we’ve found. These ideas and approaches will inform the design stage of the ICC Alpha.  You can download a pdf version (5.6MB) from Scribd if you prefer.

IA / Top Navigation

image

Lots of similar judicial sites follow the same IA format. Instead consider splitting the user journey more starkly with structured browse – situations/cases and the court – and having more flexible navigation. eg breadcrumb for situations/cases and a big footer. Use relatedness / relationships (tagging and metadata).

Big footers

image

Good for reference. Informative. Useful. Almost like a sitemap at the bottom of every page.

Timelines

image

An important tool to provide clarity, context and depth for the complex cases the ICC deals with, eg telling the story of the case.

Imagery / Video

image

Not just walls of text. Telling a human story. Educate and inspire. Show what’s happening inside the ICC and beyond. Look further than the default option (robed judges in court).

Presenting lots of text / pdfs

image

HTML needs to be the default publishing format with the exception of court filings. Effective use of typography. Plenty of white space. Readability on all devices is paramount. Clear indication of download, format, filesize before user clicks.

Search, filter, sort

image

Search tools – see latest filings, filter by case, topic, keyword, etc – are very important.

Email sign up / email alerts

image

Open up press list to anyone to sign up. Allow users to tailor subscription to specific areas, situations, cases. Offer alerts for new filings. These tools can be used in other sections, eg ASP.

Maps

image

Good to represent the scope of the court’s work and its backing (ASP), but lots of difficulties around nuance and politics.

Educational resources

image

Classroom resources and content for young people are important but difficult to do well. We need more information on audience and aims.

Feedback / transparency

image

Including report an error, ask a question, see an article’s history, ask for feedback. Helps to establish trust, signal openness and find out about things you might be unaware of.

Use of data / visualisations

image

To convey what the ICC has achieved judicially, politically and on the ground, eg trial chamber dealt with x decisions, x applications, x requests to give impression of complexity of the case.

Thanks! If you have any questions about this approach or the project in general, please feel free to leave a comment or contact Public Information and Documentation Section.

Sites reviewed

International Criminal Tribunal for the former Yugoslavia (ICTY)

International Criminal Tribunal for Rwanda (ICTR)

Special Court for Sierra Leone (SCSL)

Special Tribunal for Lebanon (STL)

Extraordinary Chambers in the Courts of Cambodia (ECCC)

International Court of Justice (ICJ)

European Court of Human Rights (ECHR)

Iran-United States Claims Tribunal

Permanent Court of Arbitration

United Nations

Ministry of Foreign Affairs | Government.nl

United Nations News Centre

European Union

European Parliament

European Commission

Council of Europe

Europol

Eurojust

OSCE: Organization for Security and Co-operation in Europe

OAS – Organization of American States

ICRC: International Committee of the Red Cross

Organisation for the Prohibition of Chemical Weapons

Nulpunt

GOV.UK

CERN

World Food Programme

Journalists for Justice

International Organization of Migration

White House

Andy Rutledge

BBC News

Warchild

Kony2012

End Impunity

Open Society Justice Initiative

Coalition for the International Criminal Court

Human Rights Watch

International Center for Transitional Justice

International Justice Project

Amnesty International

Fédération Internationale des Ligues des Droits de l’Homme (FIDH)

No Peace Without Justice

Parliamentarians for Global Action

The Redress Trust

Women’s Initiatives for Gender Justice

Worldbank