User-centred design

Or redesigning Twitter to create a modern way for seniors to keep up with their grandchildren

An acquaintance of mine asked if there was a twitter client for the iPhone especially made for seniors. He used twitter to update the world about his family's life. His father, an 82 year old Swede, had recently gotten an iPhone, but all twitter clients had too many functions and were in English. I did not know of any so I set out to create one myself. 

As a Usability Designer, I naturally use user-centred methods to reach a good enough design. The ISO 13407 is a good framework to use for achieving quality in use of a product. The framework is based on iterative design and thus one can perform different activities for each iteration to solve the current design problem in that iteration.


It is common to use a plethora of techniques for each phase in the iterative UCD cycle, such as focus groups, depth interviews, expert evaluations, wireframes, card sorting and personas. For this small project, I chose the quick and dirty version.

Context & Requirements
To understand the context of use and to agree on the requirements, I created a scenario for the senior users to review and give feedback on.

The scenario acted as a starting point for understanding what the users wanted to get from the project. The users read it and contemplated on it. Then we together discussed and refined what such an application would look like. The outcome of this discussion was a design. 

Solutions & Validation
A good idea is to create a first design that the users dare comment on. A first design that displays a high fidelity and great face validity often make the users say "Oh, fine, are you finished already, great!". Instead, I usually start out with hand-drawn sketches, also known as low fidelity prototypes or simple mockups. These can be displayed after each other and explain the flow through the application. Using them while following a scenario such as the one above is sometimes called a cognitive walkthrough. Such a walkthrough aims at finding bottle-necks in the interaction as well as issues with the interface itself. The user steps through the scenario using the prototype as a full implementation, using his/her imagination and faking the parts of the user interface that are not yet implemented. This gives a very real evaluation of the application, without the need for implementation.


In this sketch, Arne is the senior user and Tomas is his son who has the Twitter feed. The users could easily identify with Arne and could give feedback directly on the sketch. One comment on this sketch was that the possibility to reply to a post was unneccesary and thus, in the name of simplicity, it was removed totally from the interface. Another comment was "what about pictures of my grandchildren?". A new version of the prototype was made, one with higher fidelity to be able to discuss design issues on a more specific level. This was swiftly created with OmniGraffle. 


The second evaluation, done in the same manner as the first one, found some issues that would have been hard finding with only a low fidelity prototype, such as the clarity of the text on the screen. The choice of colours and the bubbles were not popular amongst the senior users with less than great visibility. Another comment was that there was little need for an update button; it is better to restart the application since this follows the users' mental model.

After this session, the design was ready to be implemented. For you who are interested in how it was implemented, the backend is a simple PHP-parser for the Twitter user's RSS-feed. This version requires the tweets to contain a link to a twitpic for the image handling to work. The frontend was made with HTML5 and CSS3 with iPhone Webkit-specifics. 


This first actual version aimed at maximizing visibility. Apart from adding the date, a feature that was missed in the earlier designs, a new feature was added; the possibility to zoom. Two old fingers on a slippy display is much harder than just turning the device 90 degrees.


One last evaluation was made before releasing the application to its intended target group. This evaluation just corrected some minor issues and the full application can be seen on the designs page. All this was just a few days' work and the web application was ready in time before Christmas.

This was a simple way of implementing a UCD method for a single designer/developer. This article ends as a lot of other articles on this site. Always contextualize your method and add what works for you today!

Written by Martin | Wednesday 30 December 2009 | 31 | Top

Comments

Riktigt intressant, bra jobbat!

Jag finurlar själv på en liknande app, men för dator. Min mormor har inga tekniska grunkor alls, men jag skulle ändå gärna vilja ha bättre löpande kontakt med henne.

Första funderingen var förstås en clean-bootande linuxburk som kör en browser i fullskärm, och sedan någon form av lösning för mail-läsning. Det blir dock för komplicerat. Det kräver för mycket tid av mig för att sätta upp och för mycket nytt lärande av henne för att komma igång.

Därför funderar jag istället på om en liten netbook som bootar upp en browser i fullskärm med Facebook vore bra. Då har jag förstås redan innan skapat ett konto till henne, och lagt till barnbarnen som vänner.

Du har här valt att separera personer i var sina feeds, kan du berätta lite om hur du tänkt där?

Har du funderat på en version av det här för dator? Hanteringen av tangentbordet på iPhone, hur upplever testanvändarna det?

Jag kommer nog ta mina tankar vidare med Facebook som grund, då alla i familjen har konton och är aktiva där. Samma grundtanke som du har, dock. Jag tror inte att det blir Facebook-sajten som den är, utan något som byggs med Facebooks API. I och för sig skulle det kanske gå att bygga det på Twitter-API:t och skicka inlägg fram och tillbaka till Facebook. Blir dock inte så bra med långa FB-inlägg.

Vore roligt att diskutera idén vidare!
peter Blom () (URL) - 18 01 10 - 14:47

Din plan där låter som Chrome OS. Smart. Kör på det! Jag har inte funderat på en datorversion. De personer som eventuellt var intresserade av detta och inte hade en iPhone kunde prenumerera på RSS-flödet direkt från Twitter i deras vanliga mail.app, så där fanns inget behov av att förenkla för att slippa lära sig avancerad ny funktionalitet.

Fokus här låg på att få något så absolut enkelt som möjligt och så snabbt som möjligt. Vi valde att högprioritera separata feeds, för att de aktuella användarna bara hade en person vardera som de vilje följa. Om projektet hade fortsatt hade vi säkerligen expanderat. Nästa steg är ju såklart att skapa ett enkelt och smart sätt att kommentera inlägg.
Martin - 19 01 10 - 08:16

aaaah…. sant sant…. RSS-feeden finns ju faktiskt att plocka….

Enkel kommentering – kanske med förvalda fraser? Smileys? Like-funktionalitet?

Själv tänkte jag att mormor får ett fält att lägga till sitt inlägg, som sedan hamnar utan koppling till något specifikt inlägg. Jag inbillar mig att det är mer komplicerat för henne att förstå kopplingar till specifika inlägg än att se det hela som en löpande dialog där hon lägger in sitt inlägg och det hamnar på tidslinjen när hon säger det.

...på tal om det kanske man skulle visualisera tidslinjen starkare? Skulle det underlätta förståelsen måntro…..
peter blom () (URL) - 20 01 10 - 21:46

Like-funktionalitet är ju inte en dum idé alls. Det är ju det basala “hej-jag-har-läst-och-uppskattar”. :) Och ja, kommentera utan koppling till inlägg är det bästa. Det har jag inte med i artikeln, men det sa användarna. Tidslinjen, fja … vi hade ett förslag på tydligare datum, men det skuffade vi undan för att inte störa innehållet för mycket.
Martin - 20 01 10 - 22:28

Nu du Peter, nu finns like-funktionalitet! ;-)
Martin - 30 01 11 - 17:16

   All html tags except <b> and <i> will be removed from your comment. You can make links in the
text by just typing the url or mail address.

To prevent automated spam you are regretfully required to answer this silly question