Docstoc

prototyping

Document Sample
prototyping Powered By Docstoc
					         Design
Sketching and Prototyping




                            1
    Sketching and Prototypes

   Sketch – used to decide what to design
   “Prototype” – Simulation of interface
   Buxton differentiates:
       Getting the right design, vs.
        Getting the design right




                                             2
Facets of Design




                   3
Low Level vs. High Level
   Need to design at multiple levels
       High level: Overall metaphors, styles, approaches
       Low level: Detailed interactions and content
   High level:
       Conceptual Models, Mental Models, Mappings
       Designer’s vision of the system
       Overall metaphors and organization
       Often inspired by other designs, e.g.
           “Folders like Outlook” (vs. Gmail’s search, later tags)
           “Scrolling like iPhone”                                   4
5
    Low Level Design
   How the specific Interactions work
   Widget Choice
       E.g., types of menus
           Pull-down
           Cascading
           Tear off
           Pop-up menus
           Context menus
       Physical buttons


                                         6
Norman’s Refrigerator




                        7
Hick’s Law (Reaction Time)
    William Edmund Hick
        British Psychologist 1952
    Ability of a human to quickly predict an
     outcome based on the number of
     simultaneous stimuli
    Software Example
        n options and constant b then time is
How much time to choose




                          9
How much time




                10
11
    Fitts’ Law
   Paul Fitts
       Psychologist at Ohio State University 1954
   Mathematical model used to predict how long it
    takes a user to move from one point on a screen to
    another
   Based on the distance between two points
   b stands for the inherent speed of the device, D is
    the distance from the starting point to the center of
    the target, W is the width of the target measured
    along the axis of motion
Fitts’ Law (cont’d)
   Farther away an object is, the longer it takes to
    acquire with a mouse
   In order to keep the average acquisition speed,
    object needs to be larger
    Sketches & Ideation
   Designers invent while sketching
     Don’t have design in their head
      first and then transfer it to paper
     Aristotle: “The things we have to
      learn
      before we do them, we learn by
      doing them”
   Everyone sketches
     Whiteboards, paper
   Don’t have to be “artistic”
   Be creative!
                                            14
Examples of Sketches




                       15
“Storyboards”
   Multiple sketches of a behavior = “storyboards”
       Comic strip of what happens
   Example: a photo browser




                                                      16
More Examples




                17
    Movie Ticket,
   3 different example designs




                                  18
Movie Ticket, 2




                  19
Movie Ticket, 3




                  20
Sketches vs. Prototypes
   Different purposes:
       Sketch for ideation, refinement
       Prototypes for evaluation, usability
   Prototypes: more investment, more “weight”
       More difficult to change, but still much easier than real
        system




                                                                    21
Sketches vs. Prototypes
   Differences in intent and purpose

        Sketch            Prototype
        Suggest           Describe
        Explore           Refine
        Question          Answer
        Propose           Test
        Provoke           Resolve
        Tentative         Specific
        Noncommittal      Depiction

                                        22
Example of Full Prototype
   Prototype of interface for controlling the paths
    of a robot




                                                   23
Resulting Prototype and
Final Design




                          24
    Another Example
   washing machine


        Do you want to use the default settings?
           Water Temperature: Cold 10 ̊C
           Water Level:                Low 1/3
           Wash Mode:                  Delicate
        Make sure you loaded clothes and added detergent.




                                                                       25
       Please contact 1-800-JNJ-WASH for any questions or feedbacks.
           Principles of UI design
   3-Click rule
   Visibility
   Accessibility
   Keyboard equivalents
   Undo action
   Short term memory load
       Average person can hold a maximum of 7 pieces of
        independent information
       Can hold information from 3 to 20 seconds
Principles of UI design
   Focus on the user
       Standards Example – Phone number
           US uses 10 characters
           Europe can be up to 15 characters
   Color
       1 in 12 people are colorblind in some way
       Red / Green is most common
           Occurs mostly in males
   Icons as a means of communication
Push Buttons
   You click it, and something happens
   Choose the title text carefully
       Apple:
           “Button names should be verbs that describe the
            action performed”
       Microsoft:
           “Aim for the shortest possible label; one word is
            best.”
           “If possible, use label text that makes sense when
            read out of context — for example, when a user
            reads or hears only the label of the current control.”28
Form Layout and Formatting
   Prototype various alternatives and allow users
    to test them to ensure good layout and ease of
    use
   Design considerations
       Consistency of all forms in look and feel
       Clear headings, labels, and logos
       Distribution and order of data-entry fields and
        buttons according to traditions
       Judicious or careful use of font sizes, highlighting,
        and colors
Examples of data-entry controls on an input form
Layout




         31
Layout




Apple has a program called Interface Builder which
                                                     32
automatically helps you use the correct spacing
Layout




         33
entering information
                                                             Name:   Alan Dix
   forms, dialogue boxes                                    Address: Lancaster
       presentation + data input



                                                                
       similar layout issues
                                                             Name:    Alan Dix
       alignment - N.B. different label lengths
                                                             Address: Lancaster

   logical layout
    
    
    
        use task analysis (ch15)
        groupings
        natural order for entering information
                                                                ?
                                                               Name: Alan Dix
                                                             Address: Lancaster


            top-bottom, left-right (depending on culture)
            set tab order for keyboard entry
The shopping cart page from the Rocky Mountain Outfitter Web site
Icons
   Icons get used for lots of different things
       Representing objects
           Files
           Tools
       Representing commands
           Open
           Undo
           ..often shortcuts to menu commands that have no icon



                                                               37
Microsoft Icon Composition




   Exceptions:
       Document icons
       Symbols such as warning
       Single objects
       Objects not recognizable at an angle
                                               38
Apple Icon Composition




   Icon “genres”
       Application: media (paper) and tool (pen)
       Utility: straight perspective, subdued colors
       ..also document, plug-in, toolbar

                                                        39
Icons
   There are guidelines for these too
       Apple:
           Design and composition should indicate purpose
           Perspective should agree with real-life interactions
           Differentiate them from other UI elements
       Microsoft:
           Colors that complement the XP design
           Perspective is either at a certain angle, or straight-on
           Everyday objects should look modern

                                                                       40
    Produce Final-Looking Graphics
   Alternatively, could use Photoshop,
    Illustrator, etc. and produce final graphics
       Designers want to show what real UI will look like
       Details of the “look”
   Web pages often use final graphics
   Add “click-through”
    behaviors
       Usually limited mostly
        to screen transitions
    Using PowerPoint to Prototype
   Add a shape, with a label   Go back


   Add a hyperlink:             Go first


   Select “Place in this document”
   Create a slide for each mode of the
    application
   Can add nice animations
   Limitations: no text
    entry, no scripting, no
    data validation
    Html editing
   Can use web editors to prototype any kind of
    interface
       Tricky for detailed layout
   Can edit html using
       Microsoft Word (not recommended)
       Microsoft Expression Web (Blend)
           free for students: www.dreamspark.com
       Adobe Dreamweaver
           free trial: https://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver
           Dreamweaver CS5 (Adobe) in Clusters
       Many others
modes
   lock to prevent accidental use …
       remove lock - ‘c’ + ‘yes’ to confirm
       frequent practiced action
   if lock forgotten
       in pocket ‘yes’ gets pressed
       goes to phone book
       in phone book …
          ‘c’ – delete entry
          ‘yes’ – confirm
        … oops !
Digital watch – User Instructions
                        Time display              Stop watch

•   two main modes      SMTWTFS

                                        A
                                                  SMTWTFS

                                                              STP




•   limited interface
       - 3 buttons                              Depress
                                                 button A
                                   A        A     for 2 seconds



•   button A            SMTWTFS                   SMTWTFS

                                  SET   A                     ALM

      changes mode                                            AM



                        Time setting             Alarm setting
Navigation and Support
Controls
   Standard window interface contain controls
    for navigation and window manipulation
       Maximize, Minimize, and Close buttons
       Scroll bars
       Record selection and record navigation arrows
   Designers should add controls to move
    screens, close open windows, and to find and
    search
   Browser forms also provide navigation and
    support controls that applications should
    support
a) The Main Menu form                b) The Order Summary form


   Prototype forms for an order-centered approach to the dialog
International UIs
   International graphical interfaces
       Resemblance icons
       Reference icons
       Arbitrary icons
       Non-iconic graphics can also be problematic
                                                          Font Substitution?
   International usability engineering
       Follow same usability engineering process for each
        interface
       Avoid complicated language, idiom, or local culture
        references
   Simply change language?
       use ‘resource’ database instead of literal text
        … but changes sizes, left-right order etc.
    International UIs
   Guidelines for internationalisation
       Time and measurement vary
           Dates are problematic (e.g., D/M/Y, M/D/Y, Y.M.D, Y-M-D, etc)
             Perhaps force month to be written (e.g., 17-Sep-01)
           Metric or imperial units (e.g., °C or °F)
       Use the appropriate character set
           Difficulties translating between lowercase and uppercase (Ǽ & ǽ)
           Sorting order can be different (e.g., ß)
       Numbers and currency vary
           Separators differ (e.g., $10,000.00 and 10.000,00 kr)
       Separate interface resources from system’s functionality
       Allow users to specify locale for their interface (e.g., Fiji or
        NZ)
 Gestural Interfaces
Gesture recognition is a topic in computer
science and language technology with the goal
of interpreting human gestures via
mathematical algorithms.
Gestures can originate from any bodily motion
or state but commonly originate from the face
or hand.
Many approaches have been made using
cameras and computer vision algorithms to
interpret sign language.
Gesture recognition
We are already living the ‘future’ that was ‘fiction’
just a short while back! Here is our chance to live
through what is shaping to be a new era of
interactive computing.
http://www.youtube.com/watch?v=e0c2B3PBvRw




                                                        51
SIGN LANGUAGE




                52
   Gestures
Hitch hiking (thumb up,
hand moving sideways)
   Gestures
Pointing to real and abstract
objects and concepts
(index, hand)
Gestures


   Finger Counting




                Thumb often used for
                “1”, esp abroad
Gestures-8
 I beg of you …
 I hope so …
Gestures




           Let’s hope its true
Gestures
Gestures
Gestures




       Terminate / cut
Gestures




           Love (Am Sign Language)
Gestures




Whoa, stop, …
                End
        Gestures

                         Trading Floor
                         Hand Signals
        1
              10   100




Fall 2010
Gestures


           call               out
 put



 Trading Floor
 Hand Signals

                  september         june
Gestures
   Conducting an orchestra (variety of both
    gestures with arms and body)
   Traffic control of cars and airplanes (hands
    flat pointing or moving)
   Shaping of imagined objects (hands tracing
    out curves and shapes)
   Martial arts, fighting (variety of movements of
    arms and body)
Pictograms
Pictograms
Example
   You are designing instruction system for
    patients in pharmacy of Alexandria hospital-
    who do not speak Arabic nor English- on how
    to take their prescribed medication correctly.
   State also input/output devices




                                                 68
quiz
   There are two possible methods by which a
    user can start numbering the pages of a
    Microsoft Word document from page zero
    rather than page one. By insert –page
    number and view --- header & footer ---
    format page number
   How could Fitts’ law be used to predict the
    time users take to carry out these

                                                  69
70

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:14
posted:3/28/2012
language:English
pages:70
Description: human computer interface lecture