Mobile Application Usability

What are the issues that impact on the usability of a mobile application? This presentation walks through common Usability problems with examples, and offers a framework to help improve usability. Companion heuristics checklist document is at http://goo.gl/e9dEP

Transcript

1. Dr. Rajesh Vasa, 2011 Twitter: @rvasa http://www.rvasa.com Mobile Usability 1
2. R. Vasa, 2011 Presentation Overview •A Quick Concept Recap •Usability on Mobile Devices - Context •Usability Concerns (via Examples) •Usability Concepts for Mobile Devices •A framework for checking user experience 2
3. R. Vasa, 2011 Elements of Designing 3 Motivation (Idea or Problem) Scenarios (Value & Metaphor) Tasks / Modes of Operation Display and Control Problem Space Solution Space This is related to application design, not algorithm design
4. R. Vasa, 2011 Mobile App. Design Approach 4 Sketching Motivation Scenarios Constraints Prototyping Navigation Flow Design Screen (Activity) Definition/Design Domain/Data Model Styles & Layouts Strings & Resources Features
5. R. Vasa, 2011 Models in Design 5 Sketching Motivation Scenarios Constraints Prototyping Navigation Flow Design Screen (Activity) Definition/Design Domain/Data Model Styles & Layouts Strings & Resources Features Task Model Data Model Presentation Model Interaction Model Goals of the user How the user will see How the user will interact Information that user will work with
6. R. Vasa, 2011 Presentation Roadmap - Where are we? •Recap •Usability on Mobile Devices - Context •Usability Concerns (via Examples) •Usability Concepts for Mobile Devices •A framework for checking user experience 6
7. R. Vasa, 2011 Mobile Devices are Different •“ALL” interactions are user-driven on mobile •The phone can ring at any time and change context on the user •Users are still thinking “WIMP” -- touch interaction models are evolving •Most people are not yet familiar with the UI model of the smart phones •Most people are not comfortable interaction with mobile phones (for long periods of time) 7
8. R. Vasa, 2011 What are mobile devices used for? •Mobile devices are used primarily as •‘Phones’ (esp. pre-iPhone) •Media Consumption Devices (post-iPhone) •Interaction is for “navigation” •Interaction for “content creation” is rare!! 8
9. R. Vasa, 2011 Mobile devices are contextual •Context is dynamic, fluid, erratic •Pocket (or) a hand-bag? •Standing up, Walking, Sitting down, Running 9 Context:: Semantic // Spacial // Social // Temporal
10. R. Vasa, 2011 Mobile devices have a specialization 10 Context:: Semantic // Spacial // Social // Temporal Web is good at semantic and social contexts Mobile devices are good for spacial and temporal contexts
11. R. Vasa, 2011 Mobiles phones are “connected” and not! •Network connectivity is “not” stable •Consider ... “Browsing a page, phone drops signal temporarily” •Do you show an error message immediately? •Do you wait? If so, for how long? •How often do you bug the user? 11
12. R. Vasa, 2011 Mobile phones are a fashion statement 12 Fashion Culture Time-Bound User View: Ugly apps. ruin the “look” of a pretty (expensive) gadget
13. R. Vasa, 2011 We made mistakes before -- we will again 13 1996: Web site for an airline -- CEO (obviously) did not mind? Will our current apps. look like this in 15 years time?
14. R. Vasa, 2011 Presentation Roadmap - Where are we? •Recap •Usability on Mobile Devices - Context •Usability Concerns (via Examples) •Usability Concepts for Mobile Devices •A framework for checking user experience 14
15. R. Vasa, 2011 Affordance is hard (always) •It is hard to know what to click Lack of Affordances: Where Can I Tap?
    )3
    ++'$.$*)-
    --/(
    .#.
    /- ,-
    1$''
    &)*1
    1# ,
    .# 3
    )
    .+
    )
    *
    )*.
    .&
    .#
    .,*/'
    .*
    /$'
    + , $0 
    !!*,) - TARGETS THAT DO NOT LOOK LIKE TARGETS
    !*,
    .#
    .," .
    , -
    *( .$( -
    -+ $''3
    1# )
    .# ,
    ,
    )*.
    ()3
    #*$ -
    0$'' 
    /- ,-
    )
    "/ --
    .#.
    )
    , 
    )
    
    .++ 
    )
    ()3
    -$./.$*)-
    #*1 0 ,
    .# 3
    #0
    .*
    .*/#
    .#
    -, )
    , + . '3
    $)
    *, ,
    .*
    $)$.$.
    )
    .$*)
    )
    *.# ,
    - -
    .#
    *).,*'-
    ,
    $)0$-$'
    )
    /- ,-
    ) 
    .*
    $-*0 ,
    .# (
    3
    !$,-.
    .++$)"
    .#
    -, )
    *,
    
    -+ $!$
    +,.
    *!
    .#
    -, )
    *( .$( -
    
    .++'
    ' ( ).
    *)
    
    +"
    * -
    )*.
    '**&
    '$&
    $.
    $-
    -/++*- 
    .*
    
    .*/# 
    -+ $''3
    $!
    $.
    $-
    +' 
    '*-
    .*
    *.# ,
    ' ( ).-
    .#.
    #0
     .. ,
    .*/#
    !!*,) -
    
    )
    *, ,
    .*
    , .
    )
    */).
    $)
    $'.
    /- ,-
    ) 
    .*
    .+
    .#
    . 2.
    Become a member
    
    )
    $'.
    .*
    , .
    )
    */).
    /- ,-
    (/-.
    .+
    Become a member
    )'$&
    .#
    *.# ,
    .$*)-
    0$''
    *)
    .#
    +"
    Sign in
    Already a member?
    .#.
    *+.$*)
    * -
    )*.
    '**&
    '$&
    $.
    )
    
    .++ 
    .
    $-
    $)
    !.
    
    .
    .#
    Already a member?
    $-
    )*.# ,
    .
    .#.
    
    '**&-
    '$&
    
    '$&'
    /..*)
     /-
    $.7-
    - ' . 
    ', 3
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    #
    . ,(
    5!!*,) 6
    /- 
    $)
    .#$-
    , +*,.
    , ! ,-
    .*
    .#*-
    -+ .-
    *!
    .#
     0$
    )
    /- ,
    $). ,!
    .#.
    + *+'
    + , $0
    ,
    .*
    
    /- 
    !*,
     ,.$)
    .#$)"-
    *,
    2(+' 
    
    +,*+ ,'3
    15 The red square responds to touch, but not obvious
16. R. Vasa, 2011 Navigation •Navigation is easier with a map and a prior mental model
    %
    "
    %
    * 
    %)*#"
    !
    +)()
    *'
    &%
    * 
    (&"
    * /
    -!##
    )
    * 
    )*(
    
    #* &+
    *''!%
    (&+%
    !%
    
    $
    %
    
    +%
    %&%$
    '')
    ) &+#
    %&*
    .'*
    +)()
    *&
    +%*
    &(
    +%*!&%#!*/
    %
    &+(
    *)*!%
    -
    )-
    $%/
    '')
    !
    &%*(&#)
    *&
    ##&-
    &(
    
    $&(
    !$$()!,
    .'(!%
    !%
    '(*!+#(
    &&"
    (()
    &$!)
    '')
    &(
    '')
    * *
    !)'#/
    '!*+()
    &(
    ,!&)
    *%
    *&
    &
    * *
    #* &+
    * *
    '(*!
    !)
    #$&)*
    
    )*%(
    #)&
    (&$$%
    /
    ''#
    +)()
    (
    %&*
    -(
    &
    !*
    *%
    * /
    &
    %&*
    "%&-
    * *
    * /
    %
    *'
    * 
    *&'
    &(
    * 
    &**&$
    &
    * 
    )(%
    *&
    !)'#/
    $&(
    !%&($*!&%
    &(
    .$'#
    
    &%)!(
    !)'#/!%
    * 
    &%*(&#)
    !%!*!##/
    - %
    * 
    +)()
    !()*
    )*(*
    .$!%!%
    * 
    &%*%*
    * %
    !%
    * $
    -/
    !%
    &((
    *&
    #'
    +)()
    !)&,(
    )+
    &%*(&#)
    16 However ....
17. R. Vasa, 2011 Navigation •Navigation is easier with a map and a prior mental model
    %
    "
    %
    * 
    %)*#"
    !
    +)()
    *'
    &%
    * 
    (&"
    * /
    -!##
    )
    * 
    )*(
    
    #* &+
    *''!%
    (&+%
    !%
    
    $
    %
    
    +%
    %&%$
    '')
    ) &+#
    %&*
    .'*
    +)()
    *&
    +%*
    &(
    +%*!&%#!*/
    %
    &+(
    *)*!%
    -
    )-
    $%/
    '')
    !
    &%*(&#)
    *&
    ##&-
    &(
    
    $&(
    !$$()!,
    .'(!%
    !%
    '(*!+#(
    &&"
    (()
    &$!)
    '')
    &(
    '')
    * *
    !)'#/
    '!*+()
    &(
    ,!&)
    *%
    *&
    &
    * *
    #* &+
    * *
    '(*!
    !)
    #$&)*
    
    )*%(
    #)&
    (&$$%
    /
    ''#
    +)()
    (
    %&*
    -(
    &
    !*
    *%
    * /
    &
    %&*
    "%&-
    * *
    * /
    %
    *'
    * 
    *&'
    &(
    * 
    &**&$
    &
    * 
    )(%
    *&
    !)'#/
    $&(
    !%&($*!&%
    &(
    .$'#
    
    &%)!(
    !)'#/!%
    * 
    &%*(&#)
    !%!*!##/
    - %
    * 
    +)()
    !()*
    )*(*
    .$!%!%
    * 
    &%*%*
    * %
    !%
    * $
    -/
    !%
    &((
    *&
    #'
    +)()
    !)&,(
    )+
    &%*(&#)
     
    ! &%
    +))
    !%
    &%*(&#)
    #)&
    )'!##/
    !%
    &&"
    (()
    &(
    &* (
    &%*%*!%*%)!,
    '')
    %&(*+%*#/
    +)
    * 
    ! &%
    )(%
    !)
    )&
    )$##
    -
    '&'#
    +)
    * )
    '')
    )&
    ,%
    ))&%
    ! &%
    +)()
    (
    &*%
    %&*
    -(
    &
    * !)
    '(*!
    
    17 •Tapping on the objects causes them to make sounds -- is it obvious in the UI?
18. R. Vasa, 2011 Easy to get lost in mobile apps
    '
    ' 
    
    %
    #
    %
    %
    !%%!
    !
    %
    "
    (!#$
    %%#
    %
    %
    $!&%!
    %%
    USA Today
    
    &"
    (%
     
    %
    '%!
    %$
    & #
    %
    !!
    $
    "!!#
    " %
    !"%)
    "#' %
    &$#$
    #!
    '% 
    %
    ""
    ! 
    !
    %
    $%&)
    "#%" %$
    $!'#
    %
    !
    %
    %!
    %
    $%
    !
    %
    '#!&$
    $%! $
    &$#$
    &$%
    %"
    %
    
    !)
    !!
    
    Navigation model is not clear -- Would you have tapped on the Logo to see other options? 18
19. R. Vasa, 2011 Interaction Model is not standardised
    
    #
    '+!
    $"(
    )
    $#)'$!(
    '
    #
    *#)!
    )
    *('
    )%(
    )
    )$%
    $'
    )
    $))$"
    $
    )
    ('#
    iPad Comic Book App. 19
20. R. Vasa, 2011 Interaction Model is still evolving
    
    #
    '+!
    $"(
    )
    $#)'$!(
    '
    #
    *#)!
    )
    *('
    )%(
    )
    )$%
    $'
    )
    $))$"
    $
    )
    ('#
    NO HYPERLINKS #
    $
    )
    !(($#(
    ))
    %$%!
    +
    !'#
    '$"
    )
    
    (
    )
    -()#
    $
    .%'!# (
    But, tap will show...
    
    #
    '+!
    $"(
    )
    $#)'$!(
    '
    #
    *#)!
    )
    *('
    )%(
    )
    )$%
    $'
    )
    $))$"
    $
    )
    ('#
    NO HYPERLINKS #
    $
    )
    !(($#(
    ))
    %$%!
    +
    !'#
    '$"
    )
    
    (
    )
    -()#
    $
    .%'!# (
    20 Swipe Gesture will give you next page Is it the best approach? Certainly not a standard yet!
21. R. Vasa, 2011 Need to rethink.... •Input -- Typing and Clicking •Lists & Scrolling •Menus (lack of!) •Forms (how big?) •Error messages (do you interrupt flow?) •Navigation (up/down, left/right, drag/tap..) 21
22. R. Vasa, 2011 Input
    
    $&
    '&!$&*
    '%$%
     !&
    &"
    ,+#'+/%
    
    &!
    &
    &!
    !&$
    " & %
    *
    
    *
    %!
     /&
    &"
    Museo del Prado
    &!
     
    !&$
    " & %
    $!
    &%
    !'%
    '%'
    Time '%%
    *"$ %
    '&
    &*
    $
    
    
    
    + 
    ! & &%
    "
    %%
    *
    '% 
    
    
    (&!
    $!'%
    &
    &
    !&&!
    !
    &
    "
    
    !($
    %
    !&
    
    
    &
    
    &
    
    !
    &
    " &$
    )!'
    
    
     
    What can you click? Do you want to click without knowing what will happen? 22
23. R. Vasa, 2011 We all have “fat” fingers •Read-Tap asymmetry •Big enough to “read”, but ... •Too small to ‘tap’ 23
24. R. Vasa, 2011 We all have “fat” fingers •Read-Tap asymmetry •Big enough to “read” •Too small to ‘tap’
    #%%'&("'!&#!
    
    '+'
    #"
    '&
    
    $
    &
    '##
    &!
    -##!"
    &'&
    %
    &"
    #%
    '
    !#(&
    *
    &
    
    % ,
    $%&
    ) !(
    &! %
    '%'&
    (&"
    
    !#(&
    '"
    (&"
    #(%
    "%&
     '#( &-
    #"
    
    *
    $
    !,
    
    ##
    "#(
    #%
    %"
    '
    !,
    &'
    
    24
25. R. Vasa, 2011 Input Design Needs Careful Thought #+&
    %
    '$$
    "
    '
    '
    $" 
    %$#%'&
    "
    '&
    %
    '
    #"
    '
    %'
    "
    &$ ,
    #"
    '
    '
    25
26. R. Vasa, 2011 Input Design Needs Careful Thought #+&
    %
    '$$
    "
    '
    '
    $" 
    %$#%'&
    "
    '&
    %
    '
    #"
    '
    %'
    "
    &$ ,
    #"
    '
    '
    26 Are these icons standard in your vocabulary?
27. R. Vasa, 2011 Input -- Spacing of Controls 
    "
    
    
    #! !
    #!"
    !"
    "
     
    
    "
     !!
    "
    "
    #""
    "
    "
    "
    27
28. R. Vasa, 2011 Fat Fingers + Forms = Oh dear ... &
    !"'#"
    #%
    &!
    '%'
    %&
    %
    
    $%'( % ,
    
    $%# !
    #%
    *&'&
    ''
    %
    &"
    #%
    '
    &'#$
    ('
    &#!
    
    $$&
    &(%
    %#!
    '&
    &
    * 
    #%
    "&'"
    '#
    !"
    '%
    #("'
    "
    '
    ' +
    $$
    (&%&
    )
    '#
    & '
    &!
    '+'
    #+&
    ''
    %
    )%,
     #&
    '#
    
    #'%
    
    28 This app. has been designed for mobile
29. R. Vasa, 2011 Fat Fingers + Forms = Oh dear ...
    &
    !"'#"
    #%
    &!
    '%'
    %&
    %
    
    $%'( % ,
    
    $%# !
    #%
    *&'&
    ''
    %
    &"
    #%
    '
    &'#$
    ('
    &#!
    
    $$&
    &(%
    %#!
    '&
    &
    * 
    #%
    "&'"
    '#
    !"
    '%
    #("'
    "
    '
    ' +
    $$
    (&%&
    )
    '#
    & '
    &!
    '+'
    #+&
    ''
    %
    )%,
     #&
    '#
    
    #'%
    
    “Did you notice the next/previous” 29
30. R. Vasa, 2011 Scrolling -- How does the user know? #
    $$
    #)')#"#)
    *('(
    "*()
    )%
    )'
    !#(
    $'
    %)*'(
    )$
    )
    )$
    
    ()$'-
    *(
    )
    ()$'(
    ,'
    #$)
    $"$#$*(!-
    '%'(#)
    $#
    )
    %
    ($"
    %$%!
    ,$#'
    
    )
    %)*'(
    ,'
    '!)
    )$
    )
    !#(
    $'
    ,'
    '#)
    ()$'(
    ('(
    !($
    &*()$#
    )
    #$'")$#
    (#)
    $
    )
    %)*'(
    (
    $#
    *('
    %*)
    )
    /
    ,$*!
    ! 
    )$
    #$,
    ,)
    )
    ')!
    (
    $*)
    #()
    $
    +#
    *()
    
    %$)$0
    
    #
    $$
    #)')#"#)
    ($"
    ()$'(
    '
    '%'(#)
    -
    
    !#
    ($"
    -
    
    %$)$
    $"
    *('(
    ,$#'
    ,)'
    )
    %)*'(
    ,'
    #+*!
    ()$'(
    $'
    ,'
    (($)
    ,)
    )
    +'$*(
    !#(
    !($
    )
    #$'")$#
    (#)
    $
    )
    %)*'(
    ,(#1)
    !,-(
    $$
    #$*
    $'
    )
    *('(
    )$
    %')
    ,)
    )
    ()$'-
    ,(
    $*)
    #
    ,)'
    )-
    ,$*!
    
    #)'()
    #
    )
    Slide or Scroll up? 30
31. R. Vasa, 2011 Data Entry -- Where is Cancel?
    #
    !$$"&
    ('
    &
    (
    '&
    &')!('
    $&
    / '#0
    #(!!-
    (%%#
    $#
    (
    (&
    &')!(
    ( '
    (
    )'&
    ($
    (
    %
    '$+#
    !$+
    
    31
32. R. Vasa, 2011 Navigation is an issue 32 iPad/iPhones do not have a Back Button!
33. R. Vasa, 2011 Navigation Bread-Crumb like metaphor .. but it is still new for many users 33
34. R. Vasa, 2011 Mobile Web is Confusing Pinch Zoom does not work (always)!! 34
35. R. Vasa, 2011 Affordance - Was that clear? !#&'
    (&%&
    #
    #"&
    '(&
    #"'%'"
    "#'%
    #"
    #
    #(%
    &"
    %#!!"'#"&
    &(&&
    '%
    "
    '&
    %$#%'
    #$ 
    "
    #(%
    &'(,
    +$'
    '#
    
     
    '#
    %
    '
    '#$&
    %'%
    '"
    )"
    '#
    '$
    "
    # 
    '!
    #
    )#
    #'
    #
    '&
    $%# !&
    *
    %#!!"
    !"
    #'
    '
    '+'
    "
    '
    *'
    "''
    '
    &!
    '#"
    "
    "
    '#
    '
    &!
    $
    &%&
    !(&'
    '$
    "
    # 
    '&
    *'
    '"
    !#)
    '
    ($
    #%
    #*"
    '#
    "
    '
    #%%
    #
    
    '#$
    "
    '
    "*&
    &'
    35
36. R. Vasa, 2011 Mobile Apps can change orientation ) *+* %$)
    &%&"
    # *
    
    #%(
    $" $
    *%
    $
    %( $** %$
    +*
    #%(
    *)* $
    )
    $
    *%
    
    )+(
     +)
    $
    
    )
    )%
    #+
     (
    *$
    $
    %$
    -
    )&+"*
    **
    +)()
    #/
    
    "))
    " !"/
    *%
    (%**
    *
    %$
    
    - #
    $
    $/
    )
    $%$
    %
    *
    +)()
    )#
    *%
    
    -(
    **
    *
    &&
    # *
    ,
     ($*"/
    $
    
     ($*
    %( $** %$
    )%
    *
     )%,( " */
    %
    *%)
    *+()
    , ""
    $
    %$"/
    %$
    %( $** %$
    )
    .*(#"/
    "%-
    +)
    -
    $$%*
    &( *
    %-
    +)()
    (
    % $
    *%
    %"
    *
    , 
    -
    (%##$
    **
    ""
    +$* %$" * )
    
    )) "
    $
    ""
    %( $** %$)
    ,$
    
    *
    "/%+*
    #/
    ,(/
    )%#-*
    (%#
    &%(*( *
    *%
    "$)&
    
    ")%
    (%##$
    **
    *
    &&
    
    )
    %$) )*$*
    )
    &%)) "
    
    
    $, * %$
    &%&%,(
    )
     )&"/
    *%
    *
    "*
    $
    &%(*( *
    %$2*
    #%,
    *
    *%
    *
    ( *
    $
    "$)&
    %(
    , 
    ,()
    
    ,("
    +)()
    
    *(%+"
     $ $
    *
    "*
    %(
    *
    )&%(*)
    )* %$
    %
    
    *%)
    *%& )
    +$%(*+$*"/
    -(
    )) "
    %$"/
    $
    "$)&
    #%
    
    ")%
    $)
    *
    "/%+*
    %
    *
    &
    $
    "$)&
    /
    #%(& $
    *
    *%&
    - * $&
    $, * %$
    (
    $*%
    
    $, * %$
    &$"
    Landscape 36
37. R. Vasa, 2011 Orientation
    
    $
    
    ##
    $
    '$"
    #%$ !#
    %"
    Science and Environment #
    !"& %#
    !
    #
     $
    ! ##
    
    ! "$"$
     
    37 Portrait - Different Layout Will the user be happy? Will the user be confused? Will the user learn?
38. R. Vasa, 2011 Orientation Changes
    
    
     ##!%
    !#)&
    '
    "&$
    '&
    ")'#"
    $"
    '#
    '
    %'
    "
    $#% !#
    '
    !#%
    %!'
    "
    !&
    '
    %%
    #%
    (&%&
    '#
    &*'
    #%"' (&
    '+
    )
    '#
    (&'
    '#
    '
    "*
    $ !"'
    #
    #"'%# &
    
    
    38 Will the user learn? Do you want this to be an intentional design choice?
39. R. Vasa, 2011 Mobile Apps. need to be Focused •The aim is to perform one task -- well! •They multi-task (at the OS level), but the user interaction is very much single task 39 Usability Check: How many different tasks does your app. perform?
40. R. Vasa, 2011 Phones are not WIMPy •Windows - Icon - Menu - Pointing •We retained only the “Icon” & Menu •Single “Window” -- Single task •No Pointer = no feedback on position •No Menu (i.e. exploration is harder) 40 Usability Check: Does your app. need to provide feedback on the pointer?
41. R. Vasa, 2011 Mobile interactions are “short lived” •You do not sit in front of your mobile 6-8 hours a day (as in a cubicle farm) -- (yet?) •Typical interaction is “few” minutes long •Games may get slightly longer interaction 41 Usability Check: How many steps and minutes to complete a scenario?
42. R. Vasa, 2011 Presentation Roadmap - Where are we? •Recap •Usability on Mobile Devices - Context •Usability Concerns (via Examples) •Usability Concepts for Mobile Devices •A framework for checking user experience 42
43. R. Vasa, 2011 Usability starts with the user •Who is the User? •Knowledge, Beliefs, Skills and Background •Interests and Preferences •Goals, Plans, Tasks, and Needs •Demographic information -- Abilities 43 Tip: Check that your assumptions match reality!
44. R. Vasa, 2011 A Model of the User •We need to have a model of the user when designing a system •We must be able to answer, •What do they know? (Knowledge) •What can they do? (Skills and Abilities) •What do they want? (Goals) •How do they like it? (Preferences) •There may be a broad category of users -- the answers for questions (above) may be fuzzy! 44
45. R. Vasa, 2011 User Modeling is critical for mobile apps. •Consider the following situations: •Can a 10yo book a flight ticket? •Can a 6yo use the address book on a phone? •Auto-CAD is now available for a mobile phone -- what is the user model they have mind? •Do you want to support the app. if the (assumed) target user group is not using it? 45
46. R. Vasa, 2011 Mobile Usability is Contextual •Where will the application be used? •When will the application be used? •What is the mental (and emotional) state of the user when they use the application? •Consider situations like Drunk, Lost in a forest (may be relevant for your app.) •How long with the user need to complete a core task? 46
47. R. Vasa, 2011 Usability -- Cognitive Load of Task •Cognitive Load: Number of concepts user must keep in short-term memory •Example (odd) Scenario: “Send a tweet while watching a movie (assume 30min. into movie) -- indicating excitement” •What is the short-term contextual memory load on the user? •What is your assumed user model? (Knowledge -- Preferences -- Abilities -- Goal) 47
48. R. Vasa, 2011 Concept Overload on the Web 48 We often forget how much we know now!!
49. R. Vasa, 2011 Concept Overload on the Web? 49 Cart, Wish list, 1-Click, Prime What others bought Review, Like, Rate
50. R. Vasa, 2011 Concept Overload on the Web? 50 Paper, Kindle -- Two prices More Buying Options Used Book - New Book
51. R. Vasa, 2011 Concept Overload on the Web? 51 Paper, Kindle, Multiple Prices More Buying Options Used Book - New Book What others bought Cart, Wish list, 1-Click, Prime Review, Like, Rate Frequently Bought Read Inside Read Reviews This is what a first time online book buyer will experience if they go to Amazon
52. R. Vasa, 2011 Concept Overload on the Web? 52 Paper, Kindle, Multiple Prices More Buying Options Used Book - New Book What others bought Cart, Wish list, 1-Click, Prime Review, Like, Rate Frequently Bought Read Inside Read Reviews We do not have the luxury of space (or) time on the mobile device
53. R. Vasa, 2011 Shopping on Mobile 53 Image Source: Amazon Inc. Concepts: Cart, Wish List, New/Used Price, View Reviews Designed to ensure that user focus is on the “Buy Now”
54. R. Vasa, 2011 Mobile Promotes Exploration 54 Image Source: Amazon Inc. Mobile apps should be designed to prompt exploration Context:: Semantic // Spacial // Social // Temporal
55. R. Vasa, 2011 Hierarchical Organisation Reduces Load 55 Image Source: Amazon Inc. Hierarchical organisation reduces cognitive load (per screen) We use this approach in menu design as well (even on desktops)
56. R. Vasa, 2011 Short Problem - Cognitive Load •Example (complex) Scenario •Ryan receives an SMS from Lee -- ‘Review presentation and e-mail it to Julia with your comments. PDF on Dropbox in Review23 folder. You have 30min.’ •Ryan is on the train -- no computer -- just a smart phone -- good 3G connection. •How many separate tasks does the user have to undertake to complete this task? •How many distinct concepts are involved? 56
57. R. Vasa, 2011 Short Problem - Cognitive Load & Stress •Example Scenario: •Lisa wants to book a (return) flight to Sydney. •Lisa is used to talking with a travel agent for all her travel arrangements. Never booked online. •New Policy in organisation requires her to use the company smart phone to make all flight bookings. She has to make an urgent travel booking (ideally to fly in a few hours) •How many concepts in short-term memory? 57
58. R. Vasa, 2011 User Attention is Distracted •Users are not (always) continuously focused on the task •What if they lose focus for a little while? •Consider these situations: •Phone rings •User has to get off at station mid-task •Can the user recover? Is it easy? 58
59. R. Vasa, 2011 Occlusion on Mobile Devices •Occlusion -- The human hand can get in the way of interaction 59 Which layout offers less occlusion issues?
60. R. Vasa, 2011 Occlusion on Mobile Devices •Soft-key is a big culprit as well (and needs to be fully tested) 60 Tap to enter Year causes soft keyboard to pop-up
61. R. Vasa, 2011 Ensuring Soft Keyboard Works •Solution: Wrap the layout in a Scroll View 61 Linear Layout Scroll View
62. R. Vasa, 2011 Users Learn and Evolve •Users get better in using an app. over time •Users learn faster and better if they are trained (even it is via a short video) •User-models are not static -- they evolve •Early-Adopter are far ahead compared to later adopters •When building features you need to know “who” you are targeting. 62
63. R. Vasa, 2011 Devices also evolve 63 Image Source: http://www.kylebean.co.uk/portfolio/
64. R. Vasa, 2011 Devices have various form factors 64
65. R. Vasa, 2011 Presentation Roadmap - Where are we? •Recap •Usability on Mobile Devices - Context •Usability Concerns (via Examples) •Usability Concepts for Mobile Devices •A framework for checking user experience 65
66. R. Vasa, 2011 How to apply all those concepts? •Usability concepts -- many abound! •But, which ones do I use? •How do I go about using these concepts to improve user experience? •What should we investigate and identify in a usability test? 66
67. R. Vasa, 2011 User Experience - Conundrum •The best approach to verifying usability is to test the interface with a “real user” •But, in practice -- this is too late (a lot of effort has been invested) •A practical compromise is to use heuristics and a framework to check usability factors •That is -- we aim to reflect on usability during the design process 67
68. R. Vasa, 2011 Usability can be improved continuously 68 Usability can be checked regularly Sketch Paper Prototype Interactive Prototype Early Release Beta Release Final Release
69. R. Vasa, 2011 User testing + checklists can help 69 Usability/Design Check List Reflect on Answers Make Changes Sketch Paper Prototype Interactive Prototype Early Release Beta Release Final Release
70. R. Vasa, 2011 Components of a Usability Checklist 70 Tasks Logical UI Graphical UI Physical UI •For each task we start by checking, •Efficiency of procedure •Support for the entire/complete operation •Stability during usage •Cognitive burden of execution
71. R. Vasa, 2011 Key Aspects of the Check list 71 Logical UI Physical UI Graphical UI Data Model Wording (Labels) Soft Keyboard Functional Organisation Navigation/ Exploration Ergonomics Physical and Temporal Context Icons and Images Font Type/Size Style/Colours Appropriate use of components Tasks are verified within the context of a User Model Tasks are generally derived from scenarios (they can even be a 1:1 mapping)
72. R. Vasa, 2011 General Purpose Checklist •A general purpose checklist and a high-level method for its application is available as a separate PDF document •See Writings on http://www.rvasa.com/ •A checklist does not guarantee usability •It will force the designer to consider all aspects that will impact usability carefully 72
73. R. Vasa, 2011 Presentation Recap •Recap •Usability on Mobile Devices - Context •Usability Concerns (via Examples) •Usability Concepts for Mobile Devices •A framework for checking user experience 73 Twitter: @rvasa Google+: Rajesh Vasa http://www.rvasa.com