DESIGN ASPECTS OF
Download
1 / 27

Mobile vs. Desktop UI Design - PowerPoint PPT Presentation


  • 1235 Views
  • Updated On :

DESIGN ASPECTS OF MOBILE USER INTERFACES Pekka Parhi Department of Electrical and Information Engineering University of Oulu [email protected] Wireless Cities 2006 Oulu, Finland Mobile vs. Desktop UI Design

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Mobile vs. Desktop UI Design' - libitha


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Slide1 l.jpg

DESIGN ASPECTS OFMOBILE USER INTERFACES

Pekka Parhi

Department of Electrical and Information Engineering

University of Oulu

[email protected]

Wireless Cities 2006

Oulu, Finland


Mobile vs desktop ui design l.jpg
Mobile vs. Desktop UI Design

  • Designing UIs for mobile devices is quite different from designing for fixed terminals

  • Different characteristics


Mobile applications l.jpg
Mobile Applications

  • Context of use

    • Dynamic, unpredictable

    • Often crowded and noisy

    • User’s attention divided among several tasks

  • Supported activities

    • Frequent, short-duration, immediate

    • Focused: few specific tasks can be carried out very well


Mobile devices l.jpg
Mobile Devices

  • Physical issues

    • Limited screen space

    • Limited input capabilities

      • Simple interaction

      • Awkward text entry

  • Technical issues

    • Processing power, memory, storage space, battery life

    • Challenges with wireless networking

      • Slow, intermittent connection


Presentation focus l.jpg
Presentation Focus

  • One-handed interaction

  • UI design to support one-handed

    use of mobile devices

  • Target size study for one-handed thumb use on touchscreen devices


Why one handed interaction l.jpg
Why One-Handed Interaction?

  • One hand occupied

  • Attention divided among tasks

  • Unstable environment

  • Two handed use unnatural


Slide7 l.jpg

Interaction on Existing Handhelds

  • Smartphones

  • Input: Hardware Buttons

  • Interaction: Keypad-mapped functions

    Directional navigation

  • PDAs

  • Input: Touch Sensitive Display Hardware Buttons

  • Interaction: Software targets for

    direct manipulation

    Directional navigation


Suitability for one handed use l.jpg
Suitability for One-Handed Use?

  • Smartphones

  • Touchscreens offer greater flexibility for UI design

  • UIs traditionally designed for pen-based, two-handed interaction

  • Compact form, proper-sized keys

  • Interaction limited to keypad mapped menus and directional navigation

    • Not efficient nor user-friendly

Touchscreen UIs for

one-handed interaction?

  • PDAs


Related work l.jpg

MessagEase

LaunchTile

Apple iPod

Jackito PDA

Related Work

  • Interfaces for One-Handed Use on PDAs

    • AppLens & LaunchTile

      [Karlson 2005]

      • Command-Based Gestures

      • Direct Manipulation Gestures

    • MessagEase[Nesbat 2003]

      • Scalable Keypad for Text Entry

  • Thumb-Based

    Hardware


Related work10 l.jpg
Related Work

  • Thumb-Based Hardware (cont.)

    • Microsoft’s Ultra-Mobile PC (formerly Project Origami)


Related work11 l.jpg
Related Work

  • Thumb-Based Hardware (cont.)

    • Touch key phone

      (NTT DoCoMo & Mitsubishi)


Direct thumb interaction l.jpg
Direct Thumb Interaction

  • Limited Screen Space

    • UI targets should be as small as possible without degrading performance and user satisfaction

  • No previous target size studies for one-handed use on small touchscreen devices

    • Studies exist for desktop-sized displays and

      pen-based interaction on mobile devices

  • Optimal Size for Targets???


Target size study l.jpg
Target Size Study

To develop guidelines for targets that

maximize performance and user preference

during one-handed thumb use on

small touchscreen devices

  • Objective


Two phase study 1 2 l.jpg
Two-Phase Study (1/2)

Phase 1: Discrete Targets

  • Single-target selection tasks

  • Similar to clicking a button or

    selecting a menu option

Phase 2: Serial Targets

  • Multi-target selection tasks

  • Similar to text entry


Two phase study 2 2 l.jpg
Two-Phase Study (2/2)

  • Participants

    • 20 (17 Male, 3 Female)

    • 18 regular cell phone users

    • 6 regular PDA users

    • All right-handed

  • HP iPAQ Pocket PC used

  • Tasks performed standing

  • Total time: 40-45 minutes

    • Including instruction, both phases and questionnaires


Phase 1 discrete targets 1 2 l.jpg
Phase 1: Discrete Targets (1/2)

  • 5 target sizes (3.8, 5.8, 7.7, 9.6, 11.5 mm)

  • 9 locations (screen divided into a 3x3 grid)

  • Each target size tested 5 times per location


Phase 1 discrete targets 2 2 l.jpg
Phase 1: Discrete Targets (2/2)

  • (1) tap green button, (2) tap actual target ‘x’

  • North <> South movement

  • Measures

    • speed, accuracy, hits distribution, user preferences

  • Constant distance between green button and target ‘x’

  • X surrounded by ‘distractors’

  • Lift-off selection strategy

  • Auditory and visual feedback


Phase 2 serial targets l.jpg
Phase 2: Serial Targets

  • 5 target sizes (5.8 – 13.4 mm), 4 locations

  • (1) Tap green, (2) Enter 4-digit code, (3) Tap END

  • Measures

    • speed, accuracy, user preferences


Results discrete targets 1 3 l.jpg
Results: Discrete Targets (1/3)

  • Speed

    • Differences between all sizes

      were statistically significant

  • Error Rate

    • No difference between 9.6

      and 11.5 mm target sizes

    • Significant differences

      between other sizes

  • Location had no effect on either speed or accuracy


Results discrete targets 2 3 l.jpg
Results: Discrete Targets (2/3)

  • Hits Distribution

    • Hit area increased with target size

      • Users trade off speed for tap accuracy

    • Right-leaning trend for targets on the right side

(white boxes = buttons; dark gray boxes = area enclosing 95% of hits per location;

gray dots = successful hits; black dots = erroneous hits)


Results discrete targets 3 3 l.jpg
Results: Discrete Targets (3/3)

  • User Preferences

    • Centerregion was the easiest

    • Objects on the left side and bottom right corner were the hardest

Mean comfort rating for each region

(1-7; 7 = most comfortable)

Mean of the smallest comfortable

target size in the region


Results serial targets 1 2 l.jpg
Results: Serial Targets (1/2)

  • Speed

    • Differences between all sizes

      were statistically significant

  • Error Rate

    • 5.8 mm differed significantly

      from target sizes ≥ 9.6 mm

    • No difference between

      other target sizes

  • Location had no effect on either speed or accuracy


Results serial targets 2 2 l.jpg
Results: Serial Targets (2/2)

  • User Preferences

    • NE region was the most

      comfortable

    • Minor differences


Discussion l.jpg
Discussion

  • Speed continued to improve significantly with even the largest targets in both phases

  • No difference in error rates with target sizes

    ≥ 9.6 mm (discrete) and ≥ 7.7 mm (serial)

  • Error rates were much higher in serial tasks than in discrete tasks (9.6 mm target: 5.0% vs. 2.8%)

  • Limitations of the study

    • One posture used for performing tasks (standing)

    • One touchscreen-equipped mobile device (PDA)


Conclusion l.jpg
Conclusion

  • Target size recommendations for one-handed use of touchscreen-based handhelds

    • ≥ 9.2 mm for single-target pointing tasks

    • ≥ 9.6 mm for multi-target pointing tasks

  • Recommendations based on error rates data along with user preferences

    • As well as hits distribution data for single-target tasks


References l.jpg
References

  • Parhi P, Karlson A, Bederson B (2006)

    Target Size Study for One-Handed Thumb Use

    on Small Touchscreen Devices.

    Proc. MobileHCI ’06, Espoo, Finland, to appear.

  • The presented study was done in UMD during Fall 2005.


Slide27 l.jpg

Thank You!

Questions?


ad