QML & JavaScript on MeeGo: Flourish Conference 2nd Apr 2011, at UIC Chicago @iRajLal
Two thumbs User Interface @iRajLal
-
Upload
raj-lal -
Category
Technology
-
view
8.313 -
download
0
description
Transcript of Two thumbs User Interface @iRajLal
![Page 1: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/1.jpg)
For Digital Photo Frame
Two Thumbs User Interface
Rajesh Lal
![Page 2: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/2.jpg)
Two Thumbs User Interface Design
Screen preview
The User Interface
![Page 3: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/3.jpg)
Two Thumbs User Interface Design
Default View with Two thumbs Interaction in a touch screen interface
Why: A Photo frame is handled with two hands with two free thumbs
![Page 4: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/4.jpg)
Two Thumbs User Interface Design
Benefits
1. Unobtrusive View
2. Best suited for Two thumbs
interaction
3. A Unique and Easy way to
browse options in a photo frame
4. Clean and Elegant design
![Page 5: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/5.jpg)
Two Thumbs User Interface Design
FEATURES
1. Rotating Dial interface which can
accommodate up to 8 items
in a category
2. A Unique Tree
a) Each Left round button is a root
b) Multiple buttons in the right are the branch of the selected root
c) Left and Right triangle (Arrow) to go up and down in the tree
![Page 6: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/6.jpg)
Two Thumbs User Interface Design
2 is selected which shows branches for 2 in the right
If 2 is settings 2a = albums, 2b=clock, 2c= calendar, etc
If 2 is an Album 2a = first picture in the album, and so on
Screen preview
1
2
3
4
2b
2c
2d
2a
![Page 7: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/7.jpg)
Two Thumbs User Interface Design
1 = Left Arrow goes Up in the Tree
2 = Right Arrow goes Down in the Tree
1 2
EXAMPLE TREE
• Root = Settings
• Albums
• Album1
• Picture1
• Picture2
• Picture3
• Album2
• …
• Wi-Fi
• Wi-Fi 1
• Wi-Fi 2
• Clock
• Hour
• Minute
• Seconds
![Page 8: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/8.jpg)
Two Thumbs User Interface Design
Grouped Interface for left thumb ONLY interaction
![Page 9: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/9.jpg)
Two Thumbs User Interface Design
Grouped Interface for right thumb ONLY interaction
![Page 10: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/10.jpg)
Two Thumbs User Interface Design
Grouped Interface for single finger interaction
![Page 11: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/11.jpg)
Two Thumbs User Interface Design
Grouped Interface for single finger interaction
![Page 12: Two thumbs User Interface @iRajLal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555adaa9d8b42a62528b4d00/html5/thumbnails/12.jpg)
Thank You
Rajesh Lal http://ABCofDesign.com