10
Cool Reader design guide v0.1 Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 1 Beta Tap Zone Actions Design Guidelines ISE SangHyun Park

Beta Tap Zone Actions Design Guidelines

  • Upload
    michon

  • View
    37

  • Download
    0

Embed Size (px)

DESCRIPTION

Beta Tap Zone Actions Design Guidelines. ISE SangHyun Park. Table of Contents. Tap Zone Actions usability and accessibility Major usability issues of current Tap Zone Actions Major strength of current Tap Zone Actions Division of touchscreen Interaction Default features - PowerPoint PPT Presentation

Citation preview

Page 1: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 1

Beta Tap Zone Actions Design Guidelines

ISESangHyun Park

Page 2: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 2

Table of Contents

1. Tap Zone Actions usability and accessibility

1) Major usability issues of current Tap Zone Actions

2) Major strength of current Tap Zone Actions

2. Division of touchscreen

3. Interaction

4. Default features

5. Layout in menu to change features

1) Option A. Tab interface

2) Option B. Tab with all info.

3) Option C. Additional depth of info. structure

4) Option D. Extended list type

5) Option E. Addition of alert popup window

6) Option F. Change of interface layout to list type

6. Instruction on Tap Zone Actions

Page 3: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 3

Tap Zone Actions usability and accessibility

1. Major usability issues of current Tap Zone Actions (TZAs)

1) No visual information on virtual keypad (inherent disadvantage)

2) Assignment of two features on one zone (fig. 1)

• without clue to distinguish meaning of two features

• without clue about how to operate each feature

3) Operation accuracy: gesture

• concern on operating both short tap and long tap accurately

4) Operation efficiency: 3 X 3 grid type of interface for gesture input

• concern on if blind people could select each location easily

2. Major strength of current Tap Zone Actions (TZAs)

1) Intuitive layout mapping interface layout for assigning features to virtual button layout on usage case

2) Comprehensive information display on each zone by putting both labels

fig. 1 current interface of setting Tap zone actions

Page 4: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 4

Division of touchscreenAs for operation efficiency, below options would be suggested for the user test. Option A. 2 X 2 Option B. 3 X 2 Option C. 3 X 3 Option D. 4 X 3

1 2 3

4 5 6

7 8 9

1 2

3 4

5 6

1 2

3 4

1 2 3

4 5 6

7 8 9

10 11 12

Page 5: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 5

InteractionAs for operation accuracy, below options would be suggested for the user test.

Interaction alternatives to access TZAs features on book contents

Option A. Short tap and double tap

Option B. Short tap + short tap with function keyby assigning the function key to one of 9 zones, left 8 keys take double features in each zone.

[1st layer with single tap] [2nd layer with multi tap (FN key + feature key)] [ Interaction ]

1 2 3

4 5 6

FN 7 8

9 10 11

12 13 14

FN 15 16- [TTS] “button(p)feature 13”

Releasetapping on 7th area

- [TTS] “buttons(p)feature 5”

multi tap(FN + key 5)

Tap on 7th area

* current interaction : short tap and long tap

Page 6: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 6

Default featuresDefault features

1.1st layer concept: features related to book navigation

2.2nd layer concept: features related to setting cool reader

3.New features • Cool reader new feature

• Start/resume• TZA new feature (located in menu)

• Add bookmark• Increase/Decrease speech rate

Bookmarklist

Readprevious

Table ofcontents

Previouspage

Start/Stop

Nextpage

FN Readnext

Search

Addbookmark

Increase font size Exit

Decrease speech

rate

Cycle read mode

Increase speech

rate

FN Decrease font size

Day/Night

IDEAL cool reader default features (version uploaded on June 4)

Page 7: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 7

Layout in menu to change featuresAs for the issue about assignment of two features on one zone in the setting interface, options for layout modification are suggested as follows:

Option A. Tab interface

Tap zone actions

Bookmarklist

Read previous

Table of contents

Previous page

Start/ Resume

Next page

FN Read next Search

CancelOK

Long tapShort tap

• Divides into two taps • pros

• cue for interaction way • distinguishable features

• cons• can’t see all features at once• complicated type of interface

Tap zone actions

CancelOK

Long tapShort tap

Option B. Tab with all info.

• Divides into two taps with all information on zone • pros

• cue for interaction way • see all features at once

• cons• could cause confusion on feature corresponding to highlighted tap

• complicated type of interface

FN

BookmarklistAdd

bookmark

Read previousIncrease font size

Table of contents

Highlight

Previous page

Decrease speech rate

Start/Resume

Cycle read mode

Nextpage

Increasespeech rate

Readnext

Decrease font size

Search

List of search

Tap zone actions

CancelOK

Long tapShort tap

Read previousIncrease font size

Table of contentsHighlight

Previous page

Decrease speech

rate

Start/Resume

Cycle read mode

Nextpage

Increasespeech rate

Readnext

Decrease font size

Search

List of search

FN

Bookmarklist

Addbookmark

Page 8: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 8

Layout in menu to change featuresLayout alternatives for setting interface of TZAs features

Option C. Additional depth of info. structure

• Add a depth to divide • pros

• cue for interaction way • distinguishable features

• cons• could cause confusion on feature corresponding to selected item• does not match interface title and contents

Tap zone actions

>

>

Short tap setting

single tap

Short tap

Long tap

CancelOK

FN

BookmarklistAdd

bookmark

Read previousIncrease font size

Table of contents

Highlight

Previous page

Decrease speech rate

Start/Resume

Cycle read mode

Nextpage

Increasespeech rate

Readnext

Decrease font size

Search

List of search

Read previousIncrease font size

Table of contents

Highlight

Previous page

Decrease speech

rate

Start/Resume

Cycle read mode

Nextpage

Increasespeech rate

Readnext

Decrease font size

Search

List of search

FN

Bookmarklist

Addbookmark

Long tap setting

CancelOK

long tap

Option D. Extended list type

• Divide two category in list and make it extendable to reduce depth and the amount of information• pros

• cue for interaction way • distinguishable features

• cons• can’t see all features at once

Tap zone actions

Enter

Single tap

Single tap with FN key

Tap zone actions

Single tap

Bookmark

list

Read previous

Table of contents

Previous page

Start/ Resume Next page

FN Read next Search

Single tap with FN key

Page 9: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 9

Layout in menu to change featuresLayout alternatives for setting interface of TZAs features

Option E. Addition of alert popup window

• Add the popup showing up once selecting a zone• pros

• can keep the current interface layout• cons

• give information later in the task flow

Tap zone actions

select

CancelOK

FN

Bookmarklist

Addbookmark

Read previous

Increase font size

Table of contents

Highlight

Previous page

Decrease speech rate

Start/Resume

Cycle read mode

Nextpage

Increasespeech rate

Readnext

Decrease font size

Search

List of search

Option F. Change of interface layout to list type

• Change interface type from grid to list• pros

• easy interaction• cons

• partially loss of visual information on virtual location of buttons• can’t see all features at once

Tap zone actions

Bookmark list

Add bookmark

Read previous

Increase font size

Table of contents

Highlighting

Previous page

Tap zone actions

CancelOK

FN

Bookmarklist

Addbookmark

Read previous

Increase font size

Table of contents

Highlight

Previous page

Decrease speech rate

Start/Resume

Cycle read mode

Nextpage

Increasespeech rate

Readnext

Decrease font size

Search

List of search

Change feature? (short) bookmark list (long) add bookmark

OK Cancel

Change features?

short

long

short

long

short

long

short

CancelOK

Page 10: Beta Tap Zone Actions Design Guidelines

Cool Reader design guide v0.1

Copyright© 2010-2011 by Ohio State University. All Rights Reserved. Page 10

Instruction on Tap zone actionsIn order to compensate the issue about lack of visual information on virtual keypad, below instruction on Tap zone actions would be provided.

an Cookery, by AmeliaSimmons This eBook isfor the use of anyone anywhere at no cost and with almost no re-strictions whatsoever. You may copy it, give it away or re-use it un-der the terms of the Project Gutenberg Li-cense included with this eBook or online at

1/234

open menu

MoreBookmarksGo to

Tap Zoneshow playeropen file

i i i

i i i

See detail info. with ‘Menu Hierarchy’ document

- [TTS] “grid menu”

an Cookery, by AmeliaSimmons This eBook isfor the use of anyone anywhere at no cost and with almost no re-strictions whatsoever. You may copy it, give it away or re-use it un-der the terms of the Project Gutenberg Li-

1/234

- [TTS] “clicked(p)list menu”

select‘tapzone’

Setting

About tap zone actions

You can quickly access feature on book by tapping shortly or long one of 3 x 3 virtual keypad dividing screen like below.

About Tap Zone Actions

- [TTS] “About tap zone actions”

select‘abouttap zoneactions’

an Cookery, by AmeliaSimmons This eBook isfor the use of anyone anywhere at no cost and with almost no re-strictions whatsoever. You may copy it, give it away or re-use it un-der the terms of the Project Gutenberg Li-cense included with this eBook or online at

1/234

< Description >• The options of setting and highlighting tap zone on tap could be accessed directly via menu.

Highlight tap zone on tap

back