Mobile HCI - PowerPoint PPT Presentation

Loading...

PPT – Mobile HCI PowerPoint presentation | free to view - id: 8e00c-NTQ0O



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Mobile HCI

Description:

First step golden rule 'Know Thy User' Doesn't matter if it's a mobile or ... designers to. ... Clothes Sizes. Shoe Sizes. Measurements. Language It's not ... – PowerPoint PPT presentation

Number of Views:83
Avg rating:3.0/5.0
Slides: 50
Provided by: steve555
Category:
Tags: hci | mobile

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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
About PowerShow.com