Icon Translator User Interface adaptation for two-hand use on - - PowerPoint PPT Presentation

icon translator
SMART_READER_LITE
LIVE PREVIEW

Icon Translator User Interface adaptation for two-hand use on - - PowerPoint PPT Presentation

Icon Translator User Interface adaptation for two-hand use on Tablets Lina Cui Peris Njuguna Matr.-Nr.: 954573 Matr.-Nr.: 955827 WS 2018 / 2019 Augsburg University of Applied Science lina.cui@hs-augsburg.de peris.njuguna@hs-augsburg.de


slide-1
SLIDE 1

Icon Translator

User Interface adaptation for two-hand use on Tablets

Lina Cui

Matr.-Nr.: 954573 lina.cui@hs-augsburg.de

Peris Njuguna

Matr.-Nr.: 955827 peris.njuguna@hs-augsburg.de WS 2018 / 2019 Augsburg University of Applied Science Interaction Engineering Prof. Dr. Michael Kipp

slide-2
SLIDE 2

Video

slide-3
SLIDE 3

Icon Translator

Motivation

We want to make it more comfortable to use a tablet

  • n a couch, while lying in bed or While traveling.
slide-4
SLIDE 4

Icon Translator

Motivation

‘Using tablets while lying in bed may require a tailored user experience and particular interaction techniques’ to design applications that take advantage of the unique affordances of tablet devices for intuitive tablet use.

2 1

Making it easier to reach with the thumb without having to change grip. Understanding tablet use; A multi-method exploration

slide-5
SLIDE 5

Icon Translator

Related work

Hand Mark Menus: Rapid Command Selection and Large Command Sets

  • n Multi-Touch Displays.

Can you handle it?: Bimanual techniques for browsing media collections on touchscreen tablets.

1 2

slide-6
SLIDE 6

Icon Translator

Interaction Technique

slide-7
SLIDE 7

Icon Translator

Interaction Technique

Prototypes

slide-8
SLIDE 8

Icon Translator

Interaction Technique

slide-9
SLIDE 9

Icon Translator

Interaction Technique

Normal Dial Proximity

slide-10
SLIDE 10

Icon Translator

Interaction Techniques

Layout: Icons were displayed randomly and named with random alphabet Animation: traces of icons showed how they translated

Design principle

slide-11
SLIDE 11

Icon Translator

User Tests

Methods

  • Observations
  • Questionnaires

Setup - comfortable

1 2 3

Test goal

  • Which one is the best

technique

slide-12
SLIDE 12

Icon Translator

We created a randomising tool for the users to select icons far away from the thumb. Each tried it in a different order. 1. We introduced the test modes, 2. introduced the technique and 3. Give them a task - to hit one specific icon in the different

  • modes. As shown in the diagram

4. Then they filled questionnaire

slide-13
SLIDE 13

Icon Translator

User Test - Participants

20 - 30 YEARS

slide-14
SLIDE 14

Icon Translator

User Test - Participants Tablet Experience

slide-15
SLIDE 15

Icon Translator

User Test - Questionnaire results

slide-16
SLIDE 16

Icon Translator

User Test - Observation results

Main result

slide-17
SLIDE 17

Icon Translator

User Test - Observation results

Other findings

slide-18
SLIDE 18

Icon Translator

Proximity mode was better than dial mode according to users subjective attitude and time costs With Proximity mode people need more time to reach icons than normal mode

BUT

The tablet used in test was with smaller size Most participants in the test were male

User Test - Conclusion

slide-19
SLIDE 19

Icon Translator

Technical Realization

Software: Processing (Version 3.4) Hardware: Huawei MediaPad M5 Library: ketai

slide-20
SLIDE 20

Icon Translator

Future Work

To test these techniques on normal size tablet to find out which is the best technique for this context. To come up with a context of using the dial technique, which took benefits of reaching icons on the left side. Generate more techniques for thumb reachability for different tasks like Watching videos and reading or editing text.

2 1 3

slide-21
SLIDE 21

Thank you for Listening

Now lets translate