Prototypes Karim Bouzoubaa

Transcription

1 Prototypes Karim Bouzoubaa

2 UI Hall of Fame or Shame? The buttons are limited to text labels: à pi instead of (scientific mode) à sqrt rather than à * instead of X Why only one line of display? No visible feedback about the first digit, the operator, etc. Why display M instead of the actual number stored in memory? All these issues violate the visibility of system state

3 Example of prototypes Approche itérative Limité dans le temps Valider auprès des utilisateurs

4 Why prototypes Get feedback earlier Prototypes are faster to build than finished implementations Get feedback early about the good and bad points of design Get feedback cheaper Prototypes are cheaper Experiment with alternatives If design decision is hard to resolve à build multiple prototypes Easier to change or throw away If problems in the design, change easily If design flaws are serious, throw away Maximizes your creative freedom

5 Prototype Fidelity Fidelity: how similar is an interface to the finished product Low fidelity: omits details User cheaper materials (Paper prototype) High Fidelity: more like finished product Similar to the finished product (simulated, electronic prototype)

6 Prototype is Multidimensional Prototypes can be low or high- fidelity in various different ways Breadth:% features covered (e.g a word processor omit printing and spell checking) Depth: how deeply each feature is implemented (always prints the same text) Horizontal prototype: is all breadth, and little depth, it is basically a front end with no backend Vertical prototype: one area of the interface is deeply implemented

7 Papers prototypes are an excellent choice for early design iterations Paper prototyping Interactive paper mockup (paper pieces show windows, menus, dialog boxes, etc.) Interaction is natural Pointing with a finger = mouse click Writing = typing A person simulates the computer s interaction: give users a task to do and watch how they do it Low fidelity in look and feel Can be high fidelity in breadth at very little cost

8 Faster to build Why paper prototyping Sketching is faster than programming Easier to change Easy to make changes between user tests, or even during a user test No code investment, everything will be thrown away (except the design) Focuses attention on big picture Designer doesn t waste time on details Customer makes more creative suggestions Non programmers can help

9 White poster board Glue White correction tape Overhead transparencies Photocopier Pens, markers, scissors and tape Tools for paper prototyping

10 How to test a paper prototype Roles for design team Computer Simulates prototype Facilitator Presents interface and tasks to the user Encourages user to think aloud by asking questions Observer Keeps mouth shut, sits on hands if necessary Takes notes

11 What you can learn from a paper prototype Conceptual model Do users understand it? Can users find their way around? Functionality Does it do what is needed? Missing features? Terminology Do users understand labels?

12 What you can t learn from a paper prototype Papers prototypes don t reveal every usability problem because they are low-fidelity in several dimensions Look: color, font, etc. Feel Response time Etc.

13 Computer prototype

14 Interactive software simulation Computer prototype High-fidelity in look & feel Low fidelity in depth Computer prototype is typically horizontal: covers most features, but no backend

15 Why use prototyping tools Faster than coding No debugging Easier to change or throw away

16 What you can learn from a computer prototype Everything you learn from a paper prototype, plus: Screen layout Is it clear, distracting, complicated? Can users find important elements? Colors, fonts, icons, etc. Well chosen? Interactive feedback Do users notice & respond to status bar messages, cursor changes, other feedback

17 Storyboard Prototyping techniques & Tools Sequence of painted screenshots connected by hyperlinks (Flash, PowerPoint, etc.) Form builder Real windows assembled from a palette of widgets (buttons, text fields, labels, etc.) HTML pages and forms, GUI builders (Eclipse,.Net, etc.) Tool: Axure Pro

18 Axure The Environement Mainly for: Web sites Web applications

19 Axure: Main components Arborescence grande aide pour définir cinématique et navigation) Les pages clés (ou les gabarits): représenter la structure des pages du futur site (ou application) la page d accueil, la page de recherche, la page d aide, la page galerie photo. La maquette est dénuée de graphisme afin de se focaliser sur la structure et les interactions dans les pages

20 Avantages : Rédaction des Spécifications Cette fenêtre renseigne toutes les informations nécessaires à la rédaction des spécifications. Tout est édité sous la forme d un document Word qui contient : l arborescence du site, Les différents états de chaque élément, Tous les détails concernant ces éléments (nom, type, actions, paramètres, commentaires...) sont renseignés dans un tableau

21 Coté Inconvénients Pas très connu jusqu à maintenant comparativement à Powerpoint ou Visio Lorsque l on exporte les maquettes en HTML : pour chaque page, Axure génère 1 page HTML + 1 répertoire correspondant. Beaucoup de fichiers pour seulement une dizaine de page.

22 Weather conditions: Paper prototype

23 Weather conditions: computer (Axure) prototype

24 Axure The Demo