Storyboard
quarta-feira, 27 de Outubro de 2004
14:57
Prototype #2: Storyboard
Joe Bob just came home and, hearing the warning tone of his alarm, slid his thumb
down the black thumb print scanner on the left side of the alarm panel interface.
This image shows the security interface afterwards, with the entire house disarmed,
after Joe Bob hit the green lock in the upper left hand corner labeled "Disarm
House." All the lock metaphors are open and colored green.
Joe Bob decided he might as well rearm the system, so he hit the red padlock on the
upper left-hand corner of the display. This image demonstrates the security interface
with the entire house now armed. Notice that all of the lock sensors are now closed
and colored red.
Remembering the last time the police showed up, Joe Bob rethinks his decision to
arm all the interior sensors when he's at home. Joe Bob scans his thumb in once
more, since he'll be disarming sensors, and then touches the "Home 2" icon on the
left-hand side. Home 2 is a factory customizable mode that turns only the external
(windows, doors, etc) sensors on and leaves all interior sensors off. This is ideally
used for the daytime, or for houses that have pets that might otherwise trip the
interior sensors.
Deciding to go out on the back porch and grab a beer to wash out his Red Man, Joe
Bob now selects "Custom Configure System" at the lower left hand corner of the
panel, and turned the door sensor off from the above "Home 2" mode. Ideal for
leaving a sensor unarmed so that people may enter the house from a particular door
- i.e. if parents wanted to leave a door unarmed so that their child could come home
late at night without triggering the alarm and waking them up, Joe Bob finds it ideal
for not having to turn the alarm off when he staggers back in with a buzz.
An intruder has now broken into the house, or at least the security system thinks so.
Notice the purple "INTRUDER" at the bottom of the screen (flashing in the final
design) and the fact that a broken red lock (also flashing in the final design)
indicates the sensor or sensors that were tripped by the intruder. Joe Bob, noticing
the flashing purple sensor, is able to quickly run into the indicated room, and shower
the intruder with chewing tobacco residue until the police, automatically notified by
the security system, arrive to haul the intruder away.
(Paper)
quarta-feira, 27 de Outubro de 2004
14:59
Prototype #1: System Sketch
A. Cheesy Logo
B. System status controls - These control buttons allow the user to select major
modes of the security system. The buttons, from top to bottom, are: Disarm System,
Arm System, Home 1, Home 2, and Vacation. The first two Disarm and Arm all
system sensors, disarming only with a proper thumb print verification. Home 1 and
Home 2 are special sensor configurations that arm only certain combinations of
sensors intended for use when the customer is at home, or perhaps a babysitter is
there. The vacation button is intended to allow the customer a specific setting for
when they are not at home, and won't be at home for some time. This could include
leaving certain sensors disarmed for a neighbor to safely enter the residence to
water the plants.
C. Sensor status indicator - Each of these sensor status indicators is shaped like a
padlock. If the sensor is armed, the padlock is locked and the sensor glows red. If
unarmed, the padlock opens and glows green. A possible intrusion is indicated by a
broke padlock flashing red.
D. 2D Floor plan layout - The floorplan of the customer's house is displayed here,
allowing the customer to easily and quickly identify where a particular sensor is
located in the house. Multiple floors can be handled with an optional touch menu bar
at the bottom of the screen.
E. System status indicator - The overall system status is indicated by this padlock
icon and text bar. The icon will display a locked padlock glowing red if the entire
system is armed. If the entire system is disarmed, the padlock will be unlocked and
green. Unlike the other sensor indicators, though, this padlock opens and turns
yellow if the system is partially armed. The text bar is used both to reinforce the
padlock icon and to ind icate additional status modes - such as Intrusion, Panic Police, Panic - Fire, Panic - EMS. Such additional status modes display in a bright
flashing purple to draw attention to the display panel.
F. Custom configuration selector - A user, having verified their ID with the tumb print
scanner, may hit this button, then touch individual sensors on the 2D floor plan to
toggle the armed status of that particular sensor. An example of a use for this would
be disarming one particular door sensor to allow someone to enter the residence only
through that particular door without triggering the alarm.
G. Panic buttons (Police, Fire, Ambulance) - Touching any one of these icons causes
the system to take over the phone lines and call the appropriate service or services.
The system dials the appropriate pre-programmed number and repeats a
preprogrammed message until disconnected. Each panic button also triggers an
audible alarm as well as the flashing purple system status display to alert everyone
in the residence to the problem.
H. Thumb print scanner - The thumb print scanner utilizes a digitizer to quickly scan
a user's thumb print as their thumb is swiped down the black digitizing pad. This is
quicker and more reliable than a password, keycode, or cardkey activated system. A
user must be verified to disarm or change the configuration of the alarm.
Paper-Supplies
quarta-feira, 27 de Outubro de 2004
15:03
www.paperprototyping.com
Paper examples
quarta-feira, 27 de Outubro de 2004
15:18
High Fidelity
quarta-feira, 27 de Outubro de 2004
15:39
High Fidelity Prototype
Figure 1: Employee Sign In [1]
From this screen, the user can go to [2], [14] and [15].
This is the initial screen.
Figure 2:
Server Table Selection [2]
From this screen, the user can go to [3], [13] and [17].
The user can get to this screen from [1], [3], [7], [9], [10], [13] and [17].
Figure 3: Seat Selection [3]
From this screen, the user can go to [2], [5] and [9].
The user can get to this screen from [2] and [5].
Figure 4: Menu [5]
From this screen, the user can go to [3] and [7].
The user can get to this screen from [3] and [7].
Figure 5: Table Order [7]
From this screen, the user can go to [2], [5], [8] and [9].
The user can get to this screen from [5].
Figure 6: Order Confirmation [8]
From this screen, the user can go to [2].
The user can get to this screen from [7].
Figure 7: Bill Payment [9]
From this screen, the user can go to [2] and [10].
The user can get to this screen from [3], [7] and [10].
Figure 8: Credit Card Payment [10]
From this screen, the user can go to [2] and [9].
The user can get to this screen from [9].
Figure 9: Break Information [13]
From this screen, the user can go to [2], [14] and [15].
The user can get to this screen from [2], [14] and [15].
Figure 10: Busboy Table Clearing [14]
From this screen, the user can go to [13] and [17].
The user can get to this screen from [1], [17] and [13].
Figure 11: Host Table Selection [15]
From this screen, the user can go to [13], [16] and [17].
The user can get to this screen from [1], [13], [16] and [17].
Figure 12: Server Assignment [16]
From this screen, the user can go to [15].
The user can get to this screen from [15].
Figure 13: Sign Out [17]
From this screen, the user can go to [1], [2], [14] and [15].
The user can get to this screen from [2], [14] and [15].
Abstractos
quarta-feira, 27 de Outubro de 2004
15:56
Ten Usability Heuristics
by Jakob Nielsen
These are ten general principles for user interface design. They are called "heuristics"
because they are more in the nature of rules of thumb than specific usability
guidelines.
Visibility of system status
The system should always keep users informed about what is going
on, through appropriate feedback within reasonable time.
Match between system and the real world
The system should speak the users' language, with words, phrases and
concepts familiar to the user, rather than system-oriented terms.
Follow real-world conventions, making information appear in a natural
and logical order.
User control and freedom
Users often choose system functions by mistake and will need a clearly
marked "emergency exit" to leave the unwanted state without having
to go through an extended dialogue. Support undo and redo.
Consistency and standards
Users should not have to wonder whether different words, situations,
or actions mean the same thing. Follow platform conventions.
Error prevention
Even better than good error messages is a careful design which
prevents a problem from occurring in the first place.
Recognition rather than recall
Make objects, actions, and options visible. The user should not have to
remember information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily
retrievable whenever appropriate.
Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the
interaction for the expert user such that the system can cater to both
inexperienced and experienced users. Allow users to tailor frequent
actions.
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely
needed. Every extra unit of information in a dialogue competes with
the relevant units of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a solution.
Help and documentation
Even though it is better if the system can be used without
documentation, it may be necessary to provide help and
documentation. Any such information should be easy to search,
focused on the user's task, list concrete steps to be carried out, and
not be too large.
http://www.useit.com/papers/heuristic/heuristic_list.html