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
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
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
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
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
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
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)
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
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
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
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