Mobile HCI

1

• Mobile HCI

2
HCI Breakdown

• User profiling
• Task Analysis
• Scenarios
• Prototypes

3
User profiling

• First step golden rule
• Know Thy User
• Doesnt matter if its a mobile or an application

4
User Profiling

• Who is going to use it
• Where are they going to use it
• What do they want to do with it
• Physicality!

5
Physicality

• In HCI Terms we call this human factors i.e.

6
2. Describe the User

• Physical attributes(age, gender, size, reach,
  visual angles, etc)
• Physical work places(table height, sound levels,
  lighting, software version)
• Perceptual abilities(hearing, vision, heat
  sensitivity)
• Cognitive abilities(memory span, reading level,
  musical training, math)
• Personality and social traits(likes, dislikes,
  preferences, patience)
• Cultural and international diversity(languages,
  dialog box flow, symbols)
• Special populations, (dis)abilities

7
Some colour-blindness tests
8
3. Task Analysis

• Talk to and observe users (NOT customers) doing
  what they do
• List each and every TASK
• Break tasks down into STEPS
• ABSTRACT into standard tasks(monitor, diagnose,
  predict, control, inspect, transmit, receive,
  decide, calculate, store, choose, operate, etc.)

9
4. Function Allocation

• Consider the whole system!
• Decide who or what is best suited to perform each
  task (or each step)
• e.g., system remembers login id, and reminds the
  user, but user remembers the password
• Base this on knowledge of system hardware,
  software, human users abilities, culture,
  communications protocols, privacy, etc.
• Allocation constraints Effectiveness
  Cognitive/affective Cost Mandatory
• Dont forget the design implications!

10
5. Define Usability Criteria

• Task X should take less than Z seconds
• New user should be able to edit document within
  30 minutes

11
6. Design the UI

• Summary of the components and their basic design
• Cross-check with any Requirements Documents
  Human Factors refs Hardware specs Budgets Laws
  (ADA) etc.
• Ensure that the system will support the design
  and comply with constraints
• (Verification and Validation, in the language of
  software engineering)

12
HCI Design

• Design is driven by requirements
• What the artifact is for
• Not how it is to be implemented
• Design represents the artifact
• Storyboards or screen sketches
• Task flow diagrams - more detailed than in task
  analysis stage
• Executable prototypes
• Representations should always simplify

13
Prototyping

• Definition Simulate or create some, but not all
  aspects of the system
• Approaches taken can differ immensely in terms of
  functionality and performance provided by the
  prototype.

14
Prototyping

• Can be
• - Throw away built, tested, then discarded.
  Knowledge gained used in production of system
• - Incremental design is partitioned into
  components, each release of system adds another
  component
• - Evolutionary built, tested, and then used to
  aid development of the final system

15
Why use prototyping?

• Complete requirements are never known at the
  outset of a systems development
• - we may have strong initial design ideas,
  but these are not complete and require in depth
  design exploration
• - it is also unrealistic to expect any
  complex design task to be completed correctly
  first time

16
Why use prototyping?

• Note a lot of systems fail to be realized (are
  canceled) due to poor design planning, and
  implementation approaches being taken
• - to avoid this we build artifacts to test
  and try out for suitability before investing in a
  solution
• - we modify our viewpoint to take on board
  findings, leading to an improved final system

17
Prototyping enables designers to..

• Undertake analysis specify user requirements
  correctly, finding out exactly what is needed
• Forms a useful approach or design tool, that aids
  forthcoming implementation
• helps to verify/contrast designs, and potential
  solutions
• resolves uncertainties - through testing
• enables experimentation of interface designs

18
Mobile Devices

• Pagers
• simple receivers
• limited in functionality and scope
• cannot transmit
• can be integrated
• Mobile Telephone
• real wireless multi-directional communication
• increasing functionality
• increasing connectivity
• increasingly enhanced interface

19
Mobile Devices

• Personal Digital Assistant
• electronic version of basic office software
• agenda, contacts, spreadsheet, simple database
• Palmtop/Handheld
• powerful computation
• communication / connectivity
• operating system
• software
• Notebook/Laptop
• same performance as desktop
• Technology Convergence

20
Mobile DevicesAnthology

• Pager
• receive only
• tiny displays
• simple text messages

• PDA
• simple graphical displays
• character recognition
• simplified WWW

• Laptop
• fully functional
• standard applications

Sensors, embedded controllers

• Palmtop
• tiny keyboard
• simple versions of standard applications

• Mobile phones
• voice, data
• simple text displays

performance
21
Mobile DevicesSome Characteristics

• Power consumption
• limited battery life
• limited computing power, low quality displays,
  small disks due to limited battery capacity
• CPU power consumption
• internal capacity, reduced by integration
• supply voltage, can be reduced to a certain limit
• clock frequency, can be reduced temporally
• Loss of data
• higher probability, has to be included in advance
  into the design (e.g., defects, theft)

22
Mobile DevicesSome Characteristics

• User interfaces
• keyboard or pen based
• compromise between size of fingers and
  portability
• integration of character/voice recognition,
  abstract symbols
• screen size, resolution and viewing quality
• can be quite limited
• need to consider many environmental factors
• Ergonomic / Design Factors
• none/one/two hand usage
• left/right handed?
• ruggedness (hermetic devices)
• appeal

23
Mobile DevicesSome Characteristics

• Limited memory
• limited value of mass memories with moving parts
• flash-memory or ? as alternative
• Communications and Connectivity
• wired / wireless communication
• IrDA (Infrared Data Association)
• serial ports
• integrated modem
• communication and connectivity are essential
• Security
• loss or theft

24
Mobile DevicesSome Characteristics

• Operating Systems
• mobile friendly operating systems
• EPOC (Symbian)
• WinCE (PocketPC - Microsoft)
• Palm
• Web Pages displayed using WML

25
Applications

• Globalisation issues

26
A few simple hints

• Colour
• Flags
• Icons
• Date and Time
• Address Formats

27
Colour Choice

• Different Countries have different meanings for
  colours
• Red Danger (USA), Aristocracy(France),
  Death(Egypt), Life/Creativity(India), Japan
  (anger), China (happiness)
• White Purity(USA), Joy(Egypt), Death(India),
  Death(China)

28
Flags

• Flags are best avoided because they are more
  political than cultural.
• The Canadian flag doesn't indicate whether a
  given web site is written in French or English
  and a Brazilian flag doesn't indicate Spanish or
  Portuguese.
• Unless you have a clear reason for using flags,
  you probably shouldn't.

29
Body Language

• Some cultures are much less diverse than the U.S.
  and are keenly sensitive to photographs of people
  who do not reflect the general population.
• Also be sensitive to how the models are dressed
  and how they pose.
• An open palm may mean "stop" in the U.S., but is
  offensive to other cultures.
• Body language is just as important as the written
  language.

30
Icon Design

• Different symbols mean different things
• Some people would not know what they meant so use
  global symbols wherever possible
• Web sites rely on icons to assist the user, such
  as the ubiquitous shopping cart icon.
• Imagine what a shopping cart means in a culture
  where people rarely use shopping carts.

31
Whats a Shopping Cart?

• UK
• USA
• Canada
• Germany
• Japan

32
Icon Design

• The garbage can icon on the Macintosh was not
  universally recognised because garbage cans
  around the world don't all look alike.
• The same goes for mailboxes.
• And in France, the house icon doesn't signify
  "home page" because they usually call their home
  pages the "welcome page."

33
Icons

• Thailand And USA rubbish bins (Russo and Boor
  1993)

34
You Got Mail
35
Symbols

• OK or vulgar? (USA v Brazil / Germany)

36
Content - Illustrations

• How to fit contraceptive diaphragm (Western Women
  v Egyptian Women)

37
Date and Time

• Many different formats
• dd/mm/yyyy
• mm/dd/yyyy
• Time 24 hr clock v 12 hr

38
Date Formats

• 31.1.95 Austria, Belgium, Canada, Finland,
  Germany, Ireland, Italy, Netherlands, Norway,
  Portugal, UK
• 31-1-95 Belgium, Canada, Netherlands
• 31. 1. 95 Iceland
• 95/1/31 Arabia
• 95-1-31 Sweden
• 1/31/95 - USA

39
Time Formats

• 1000 Uhr / 1400 Uhr Austria, Germany
• 1000 / 1400 Denmark, Spain, UK
• 10.00 / 14.00 Finland, Germany, Italy,
  Netherlands
• Kl 10.00 / Kl 14.00 Norway, Sweden
• 1000 du. / 200 de Hungary
• 1000 AM / 200 PM - USA

40
Address Format

• 112 different address formats in the world
• You'll need to update your web site to
  accommodate entering and displaying addresses for
  different countries. Compare U.S. and Germany.

41

• JOHN DOE
• 55 COOLIDGE ST
• BOSTON, MA 02151-4645
• For the U.S., the standard is all uppercase
  letters, with the street number coming before the
  street name and the ZIP code on the same line as
  the city and state.
• Herm
• Gunther Meyer
• Goethestrae 25
• 20002 HAMBURG
• For the German address, the personal form of
  address, Herm, is written on a separate line, the
  house number follows the street number, and an
  empty line is inserted above the postal code.

42
Others

• Phone Numbers
• Number Formats
• Clothes Sizes
• Shoe Sizes
• Measurements

43

• Language Its not just translation..

44
Mind the (Language) Gap

• A shared language does not save you from
  translation
• Sneakers / Trainers
• Restroom / Loo
• 911 / 999
• Cookie / Biscuit
• Wrench / Spanner
• Truck / Lorry
• Elevator / Lift
• Parking Lot / Car Park

45
Direction Of Text
46
Text Expansion and Contraction

• When a block of text is translated into another
  language, it tends to expand or contract
• The word cat in English translates to "gato" in
  Spanish, thus adding a character. In Chinese, a
  cat can be represented by just one character.

47
Text Expansion and Contraction

• General patterns are noticeable.
• English text often expands when translated into
  European languagesfrom approximately 15 in
  Spanish to as much as 35 in German
• Asian languages typically require fewer
  characters than their English equivalents, yet
  you do not see much contraction they generally
  need to be displayed at a larger point size to
  ensure legibility.

48

• Text expansion and contraction become
  particularly acute when working with small
  amounts of text, such as with headlines or text
  in navigation bars.
• For example, search translated into French
  becomes "recherché," a 30 expansion.

49
Text Expansion