39. 1. Dévelopement de Concept: focus groups, et commentaires des clients existantes 2. Une fois en ligne : Laboratoire si on doit voire les visages. Si non, considère les utils à distance 3. Continuelle: Sondages parfois; statistiques/metriques, commentaires des clients; peut utiliser des techniques a distance pour étudier la concurrance 4. Révision du site: Techniques à distance avec des grandes nombres d’utilisateurs, plus autre information de l’étape continuelle
40.
41.
42.
43.
44.
45.
Notes de l'éditeur
Un phoque ou un ours? souvent les gens qui font les modeles et la programmation ne le voit pas le meme que les utilisateurs cést un defi particulierement difficile dans la domaine des systemes d’information, et surtout sur le Web - Raisons? Que pensez vous?
Plusieurs raisons Mais il faut quande meme essayer; l’impact de developper les systems dans un facon utilisable est enorme
Il insistez sur la simplicite, et a revolutionisé le monde des ordinateurs, des ecouteurs de music, et des telephones cellulaire
c’est laide! Utilize les animations seulement s’il y a vraiment un but; c’est une distraction Mais meme des sites professionels Seloger – peut pas telephoner Conforama – trouvez votre magasin (pas d’addresse) 1ere page complique, mais bon pour les plus populaires, et on peut trouvez le lien pour les magasins La carte est bon de montrez les numeros de region Liste alphabetique est bon Choisir ce magasin – non-clickable
Bon – beaucoup d’information Pas bon - contradictions
Besoins - pourquoi créer cette site Web? qui sont les utilisateurs du site web? quels sont les principaux défauts du site actuel? (s’il y en a) quels sont les informations et fonctionnalités manquantes ?
e.g. – qui veut quoi de la site? (Seloger veut des annonceurs, des agences veulent des locataires, les locataires veulent trouver un maison ou apt
Le plus réel que possible Fais de la recherche pour les developper
Card sorting – open vs closed Open Card Sorting: Participants are given cards showing site content with no pre-established groupings. They are asked to sort cards into groups that they feel are appropriate and then describe each group. Open card sorting is useful as input to information structures in new or existing sites and products. Closed Card Sorting: Participants are given cards showing site content with an established initial set of primary groups. Participants are asked to place cards into these pre-established primary groups. Closed card sorting is useful when adding new content to an existing structure, or for gaining additional feedback after an open card sort.
Pas les programmateurs Pas les employees
Shoppers were filling out forms partially and then closing To programmers enter = go to next page; TAB to go to next spot; How increase odds of overcoming such problems? Test early and test often
Commentaires via appels, lettres, e-mail, twitter, etc Remote often confused with online focus groups
Moderator – no bias, bring all out
E-g. logo in dessus a gauche Recherche box in top right or top left under logo Navigation premiere en dessus
Bias (débutantes ou ceux qui ont des opintions tres fort) Intrusive (ne demande pas avant qu’ils ont passe un peut de temps au site)
E-mail, analysis of calls to call-centre, even snail mail, twitter, Since you get it, USE IT !!
Respond quickly and well, or will make matters worse Ou exactement etait le probleme?
Wide range of computer systems; buggy personal computers
Eventually … redesign … test to learn what can be kept…. Designers… want to start clean slate… not always necessary…
How would you tackle it? What search terms?
Simple mais effective Facile a lire Facile a voire les details du magasin Le photo de l’équipe personalise et donne du confiance Visite virtuelle donne confience Les “plus”
he anatomy of good mobile design 1) Putting things in context Understand, respect and design for your users' contexts. These include: • Environmental: don't make noise when I’m in a meeting; how do you get my attention on a noisy bus; when it’s cold, can I use the touch screen with my gloves on? • Social: when I’m working, don't distract me with updates from my social network; when I’m playing don’t distract me with work-related stuff. • Technical: I’m on a BlackBerry, so why does this app look and work like an iPhone? • Personal: have you considered that I might not have perfect sight, hearing or coordination. Did you consider that I prefer/need to use the phone one-handed or I may be left-handed? Contributors: Ballard, Hoober, Vonshak 2) The mobile context Mobile means ‘on the go’ and ‘away from my desk’. But I might be on the peak of Kilimanjaro, curled up on the couch or anywhere in-between. • Establish the mobile contexts when I’m most likely to access your app/site. • In this context, what are the potential opportunities for you and distractions for me? • Design with this context in mind. Make it convenient, necessary and easy for me to use. What are the most appropriate features, controls and input methods? • The mobile impulse usually boils down to one of three mindsets: a) I’m micro-tasking. Optimize for quick bursts of activity. Identify the recurring tasks and then polish, polish, polish. b) I'm local. Take advantage of location, audio and video sensors to establish context. c) I'm bored. Distract me by taking me on a journey of discovery. Contributors: Clark, Ballard, Hoober 3) Make the most of the Platform Always design for mobile first – don’t just re-purpose your web site/app. Design/redesign from the ground up to take advantage of the new opportunities that mobile offers which desktop PCs and other channels don’t. • Mobile devices have on-board GPS, compass, camera, accelerometer, microphone and other functions. • Advanced mobile devices are sensor-rich – phones can tell where they are, the direction they're facing, the angle they’re titled at, what they can hear or see. • Different mobile devices have different capabilities and limitations. Play to the strengths of each and try to avoid watering down the experience on one device because of constraints on another. • If you are designing for a particular device/OS, make sure you know it intimately. Whatever the handset does normally, do that. Inconsistency leads to errors and frustration. So if the handset usually saves changes automatically, don’t expect people to press a save button. Contributors: Nudelman, Homer, Hoober, Pressman, Tifford, Wroblewski But: • Don’t complicate things unnecessarily. Keep the user interface as simple and intuitive, as possible. • Maintain consistency of look and feel across channels. Yes the functionality, capability and visual may vary, but the experience should be intuitive and familiar when switching from PC Web to mobile, for example. Contributors: Nudelman, Homer 4) Mind your fingers and thumbs Many high-end handsets now have touch screens. Rather than being operated/navigated by buttons and cursor, the phone is operated by touch or tapping and movements of the fingers and thumb called gestures. Touch interaction requires careful design. This isn’t just graphic design, it is now industrial design, as you are designing a physical interface to be explored by human hands. • Obey the touch-target rules. The norm for touch-target fields is one centimeter, but all platforms (iPhone, Android, Symbian et• will deviate slightly. If the target field is less than one centimeter – as is often the case with the input fields adjacent to advertising links – it is harder to tap with precision. • Remember fingers and thumbs are imprecise tools. Be forgiving of imperfect input. A touch control, such as a virtual button, shouldn't perform an action immediately on contact. Indicate the contact with visual feedback and give users a chance to slide their finger away if they touched the wrong control. Only activate the control when the finger lifts off from the button. • The design of your interface is as important as the handset itself, with honest-to-god ergonomic issues. Consider how the interface feels in the hand, where fingers naturally come to rest, where it’s comfortable to tap. Organize the screen for the fingers or, more importantly, the thumb, since that's the digit that gets the workout when you work a mobile phone one-handed. While a thumb can manage to sweep the entire screen, it can only reach a third of the screen effortlessly – that’s the side of the screen opposite the thumb. All frequently used buttons and tap targets should be in this tap zone. This is why on touch-screen phones the toolbars are always at the bottom. • Don’t overdo gestures. Gestures are a great way to interact with content, but they should be used sparingly and carefully. Some gestures are well-known such the pinch to resize pictures etc, but many users won’t know all gestures, so never make a gesture the only way to perform an action. Contributors: Weiss, Clark, Arthur 5) Accommodate the challenges of mobile Mobile devices have many constraints including small screens, lower processing power, limited battery power, intermittent connectivity, varying connection speeds, in-pocket interaction. • Don’t fight the constraints of mobile, work with them to guide your design to an elegant solution. • Beware of pocket calls – they can be costly. Touch-screen devices have difficulty distinguishing between intentional taps and swipes from fingers and accidental ones from warm body parts even through clothing (especially on hot days). Use physical lock buttons or multi-digit or multi-point gestures to activate. • Minimize the pain. Mobile is unpredictable. Try to minimize the impact on the user experience when the network connection is lost (by using data caching) and keeping the user informed. • Fast load or action times are important, but visual feedback is, perhaps, more important. Use distraction graphics – but don’t use too much processing power – while the app/site loads, and always keep up the illusion that the user is in control of the device. • Just because mobile can do it, doesn’t mean it is best. Take a museum tour, for example, if visitors don’t have ear plugs, will they want to hold their phone to their ear for a 45-minute audio tour, or hold the phone aloft for an augmented-reality (AR) tour? Mobile is great for two-way interaction, but will visitors want to be constantly switching from ear to eye? Contributors: Weiss, Ginsburg, Wroblewski, Proctor 6) Empower your customers • You’d be amazed what people are prepared to do on a mobile phone, as long as it is useful, straight-forward and fun. Yes, even paying taxes. Look for things you couldn’t imagine anyone using their phone to do, research it, then build it. • The content is the interface. Mobile screens are tiny in comparison to desktop computer screens, thus every pixel of UI should add value to the user experience. Make it beautiful, but make it useful. • Make it quick and easy. Remember screens are small, entering information is difficult and mobile users are often multi-tasking, using a phone one-handed, or in a hurry. Minimize errors and make users more efficient, by storing preferences and recent queries, and suggesting matches. Contributors: Tifford, Ginsburg 7) Test, test, test Test the app/site on actual devices, with real customers, using it in the typical and expected real-world contexts/situations. • Emulators are great, but they are not the same thing as real testing on real devices on real mobile networks by real people. • Break the glass barrier when working with users. Be flexible and mobile with your testing strategies. Go to where they are more often. Ensure the entire team engages with users directly even if that means you need to bring them to the labs. • The hardware should always be considered... the handling (or gripping) of a device can change the entire usability of your app [see above]. In the early days of design process, print off the screens and stick them to a plastic model. Contributors: Grigsby, Ballard, Tifford, Vonshak 8) The iconic icon The icon is most commonly associated with the download app. However, increasingly mobile sites and Web apps also use mobile launchers, which are icons that hyperlink to the Web address. • Do not underestimate the importance of this tiny collection of pixels. Give this icon a disproportionate amount of design attention and polish. If you don’t have the design expertise, hire a professional - it is worth it. • The icon – more so than the name or description – is what catches the eye of the customer and encourages them to find out more/download the app. Once downloaded, the icon needs to jump out of the mobile start page/home screen every time the device is switched on. • Make your icon colorful, make it memorable, make it fun, but whatever you do, don't make it mysterious. The icon is an advertisement, so it has to be clear about what it's selling. The icon is the product packaging, so it's great if it’s pretty, but it's more important to be descriptive and identifiable at a glance. Don’t be too clever or cryptic. Contributors: Clark, Ginsburg