Practical UI Guidelines for Wearable Apps
-
Upload
victor-dibia -
Category
Software
-
view
218 -
download
0
description
Transcript of Practical UI Guidelines for Wearable Apps
![Page 1: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/1.jpg)
Practical UI
Guidelines for Tizen
Wearable Apps (Gear 2)Victor Dibia
City University of Hong Kong.
![Page 2: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/2.jpg)
2
What We’ll Talk About
• Introduction – 3 aspects of design
• Designing around Fashion/Social Norms
• Designing around Sensing Capabilities
• Designing around Form/Function.
• Common Mistakes and Tips
• Useful Libraries
• Q/A!
![Page 3: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/3.jpg)
3
About Me
I enjoy building apps for mobile devices (Android,
Blackberry, Windows Phone), and the Web (HTML,
JS,PHP, JSP,ASP.Net) .
• Victor Dibia
@vykthur, [email protected]
• Researcher at City University
of Hong Kong
• Lead Developer, Denvycom
![Page 4: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/4.jpg)
4
Some Apps I’ve Built
Foqus
Gear Tennis Raindrops Proudly USA
Gear Ship Blocks Gear Dansa
![Page 5: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/5.jpg)
Introduction
![Page 6: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/6.jpg)
6
Why Design ?
50% of customers stop using their
devices after 6 months- CCS Consulting 2014
“Few examples”“Coming up with the
flow and intuitive
universal gesture
required was tough”
“small dimension
makes design
difficult.”
- 2014 Gear 2 Developer Survey.
![Page 7: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/7.jpg)
7
But there is hope …
We design to maximize the strengths and
minimize the weaknesses of these devices.
Strengths- Sensors
- Consistency
- Social Aspects
Weakness- Interface (screensize)
- Power (battery, processing)
- Storage
![Page 8: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/8.jpg)
8
3 Important Aspects.
• As a software developer, (Android Java, iOS
Objective C, HTML, JavaScript, Php) , there are 3
important aspects of wearable app design.
We can design around ..
icons : Kenneth Von Alt, Sherrinford ,Noun Project
Fashion Sensors Function
![Page 9: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/9.jpg)
Designing around Fashion/Social Norms
![Page 10: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/10.jpg)
10
Social / Fashion Norms
• Smartwatches ARE a fashion accessory.
• Design watchfaces that are meaningful , expressive
and elegant
![Page 11: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/11.jpg)
Designing around Sensing Capabilities
![Page 12: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/12.jpg)
12
Sensing Capabilities
Use multiple sensors for improved input.
• Use Accelerometer Gestures
E.g close a notification, game control, (devicemotion api,
direction api)
• Use the new sensors – pressure, light, UV, GPS to
estimate user state.
•
• Voice and TTS
Eg. Instead of asking the user about
calories, exercise reps, sun exposure,
comfort etc, use sensors to estimate.
![Page 13: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/13.jpg)
13
Sensing Capabilities
Use multiple sensors for improved feedback.
• Vibrations are great for personalized feedback. Be
creative. Use vibration duration to communicate with
users even without glancing.
Eg. 3 vibrations can
mean a meeting with the
boss, or some app state
has changed.
![Page 14: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/14.jpg)
14
Sensing Capabilities
Try out more advanced touch gestures ..
Tap, double tap, rotate, swipe (up, left , right, down), pan,
pinch, zoom, to expand interaction model.
- Use the common gestures first, go from the
known to the unknown.
- Remember to teach the user (add instructions).
![Page 15: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/15.jpg)
Designing around Form and Function
![Page 16: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/16.jpg)
16
Form and Function
Be Legible and Clear
• Legible text. 30px-35px font size.
• Single action per (small) screen . Aim for two
buttons max per screen . Beware of small text and buttons in games.
• The Gear is meant to be glanceable . Avoid use cases that require extended continuous use (E.g some games)
• Optimize for SpaceRemember to minify your files and remove unused scripts. Limited device storage.
![Page 17: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/17.jpg)
17
Example
Vs.Disaggregate – One main
function per screen.
![Page 18: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/18.jpg)
Common Mistakes and Tips
![Page 19: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/19.jpg)
19
The Emulator is …
NOT always your friend.
Beware of Legibility and display discrepancies
between the Emulator and a Real Device
Nice game but
for those with
good eyes.
- User comment.
![Page 20: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/20.jpg)
20
Emulator Issues .
Beware of small fonts and legibility issues. Major pain point for users.
![Page 21: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/21.jpg)
21
Test/Debug faster with the Chrome Browser
• Open File with Chrome
• F12 > Escape > Emulation
• Configure Screen Size
![Page 22: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/22.jpg)
22
Use Relative Dimensions for Multidevice
Support
Primarily use % or auto
instead of px values for
CSS element positioning.
margin: auto ;
margin: 50px 40px 40px
100px ;
![Page 23: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/23.jpg)
23
Localize Your App.
Translate to multiple
languages
• Use the Wearable IDE
localization wizard.
• Allows you reach more
people ..
• Improves your number
of downloads
![Page 24: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/24.jpg)
24
Certification Tips
• Use tizen.time.getCurrentDateTime() instead
of Date() .
• Manage the screen display when using non-
touch gestures. E.g keep the screen on during
voice dictation or gesture input.
• Ensure you save your package id for future
app updates.
• Use the Samsung Developer Forum for Q/A.
![Page 25: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/25.jpg)
Some Useful Libraries
![Page 26: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/26.jpg)
26
Useful Libraries
• Hammer.js
Expand your touch UI Interaction Model – Tap,
DoubleTap, Pan, Pinch, Rotate, Swipe
• Pixi.js , Cocos2D-JS
2D webGL renderer with canvas fallback
• Sketch.js
Javascript Particle engine
• Charts.js
Graphs and Charts
![Page 27: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/27.jpg)
27
Conclusion
In addition to the design guidelines, here are 3
important questions ..
• What is the main function of my app ?
• How does my app perform this function better than a
mobile phone ? (can my app be prescribed as a solution ?)
• Does my app take advantage of context to provide
more value ? (gym, during meditation, everywhere?)
![Page 28: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/28.jpg)
28
Resources
• Samsung Developer HomePage
Download SDK, Official UI Guidelines
http://developer.samsung.com/
• Samsung Developer Forum –
Q/A
http://developer.samsung.com/forum/en
• Tutorials on Denvycom .
Installation, database access, sensor data access,
certification tips , gestures etc
http://denvycom.com/blog/tag/gear-2/
![Page 29: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/29.jpg)
29
Thank you!
Questions ?
![Page 30: Practical UI Guidelines for Wearable Apps](https://reader034.fdocuments.us/reader034/viewer/2022051411/547e7be2b4af9fb4158b5640/html5/thumbnails/30.jpg)