UI Hall of Fame or Shame? The buttons are limited to text labels: - PowerPoint PPT Presentation

Prototypes Karim Bouzoubaa

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

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

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

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)

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

Paper prototyping • Papers prototypes are an excellent choice for early design iterations • 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

Why paper prototyping • Faster to build – Sketching is faster than programming • Easier to change – Easy to make changes between user tests, or e ven 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

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

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

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?

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.

Computer prototype

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

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

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

Prototyping techniques & Tools • Storyboard – 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

Axure The Environement Mainly for: – Web sites – Web applications

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

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

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.

Weather conditions: Paper prototype 22 2009-2008

Weather conditions: computer (Axure) prototype

Axure The Demo