wireless application design - khon kaen universitywitcha/witcha/courses...wireless application...
TRANSCRIPT
![Page 1: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/1.jpg)
Wireless Application Design Witcha Feungchan
2013
Sunday, June 16, 13
![Page 2: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/2.jpg)
Wireless Application Design Witcha Feungchan
2013
Sunday, June 16, 13
![Page 3: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/3.jpg)
Wireless Application Design Witcha Feungchan
2013
Sunday, June 16, 13
![Page 4: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/4.jpg)
Overview
• Wireless Devices
• Limitation of hardware
• Screen = Real estate
• Auxiliary Features
• Framework vs Custom
• HCI
• UI & UX design guide
Sunday, June 16, 13
![Page 5: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/5.jpg)
Wireless Devices
• Focusses on Smart phones and Tablets
• Platforms: IOS, Android, Windows mobile, etc.
• Design concept may apply to all
Sunday, June 16, 13
![Page 6: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/6.jpg)
Hardware• SOC (System On Chip)
• CPU speed
• 1 GHz minimum for new devices
• Multi-cores for high-end devices this year
• GPU
• Supports 3D for game/ HD content
• Most CPU has built-in graphic unit
Sunday, June 16, 13
![Page 7: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/7.jpg)
Hardware
http://www.qualcomm.com/snapdragon/processors/800
Sunday, June 16, 13
![Page 8: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/8.jpg)
Hardware cont.
• Memory
• 64-2048 MB
• >512MB is recommended for multi-tasking
• Storage
• Flash technology 1 GB minimum
• Built-in & Removable flash memory
Sunday, June 16, 13
![Page 9: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/9.jpg)
Display Screen
• LCD Based technology
• OLED Based technology
• Resolutions
• Touch technology
Sunday, June 16, 13
![Page 10: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/10.jpg)
Display Screen
http://www.geekwithlaptop.com/the-effect-of-screen-size-on-smartphone-sales
Apple iPad 1024 x 768
iPhone 320 x 480
iPhone 4 640 x 960
iPod Touch 320 x 480
Samsung Galaxy Ace 320 x 480
Galaxy Mini 240 x 320
Galaxy S 480 x 800
Galaxy S II 480 x 800
Google Nexus One 800 x 480
Dell Streak 800 x 480
Motorola Atrix 540 x 960
Xoom 1280 x 800
CLIQ 2™ 480 x 854
CITRUS™ 320 x 480
Sunday, June 16, 13
![Page 11: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/11.jpg)
Display Screen
http://www.wired.com/images_blogs/gadgetlab/2013/04/IHS_Chart_display.jpghttp://www.gizmag.com/smartphone-comparison-2013/27259/pictures#6http://blogs.which.co.uk/technology/wp-content/uploads/2013/06/Does-Samsung-make-too-many-phones-and-tablets-final.jpg
Sunday, June 16, 13
![Page 12: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/12.jpg)
Display Screen
http://www.wired.com/images_blogs/gadgetlab/2013/04/IHS_Chart_display.jpghttp://www.gizmag.com/smartphone-comparison-2013/27259/pictures#6http://blogs.which.co.uk/technology/wp-content/uploads/2013/06/Does-Samsung-make-too-many-phones-and-tablets-final.jpg
Sunday, June 16, 13
![Page 13: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/13.jpg)
Display Screen
http://www.wired.com/images_blogs/gadgetlab/2013/04/IHS_Chart_display.jpghttp://www.gizmag.com/smartphone-comparison-2013/27259/pictures#6http://blogs.which.co.uk/technology/wp-content/uploads/2013/06/Does-Samsung-make-too-many-phones-and-tablets-final.jpg
Sunday, June 16, 13
![Page 14: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/14.jpg)
Touch Screen
• Resistive
• Capacitive
• Acoustic wave
Bizzntech. (2010). Resistive and Capacitive touch screen. Erodov. (2010). Surface acoustic wave.
Sunday, June 16, 13
![Page 15: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/15.jpg)
Touch Screen
• Resistive
• Capacitive
• Acoustic wave
Bizzntech. (2010). Resistive and Capacitive touch screen. Erodov. (2010). Surface acoustic wave.
Sunday, June 16, 13
![Page 16: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/16.jpg)
Touch Screen
• Resistive
• Capacitive
• Acoustic wave
Bizzntech. (2010). Resistive and Capacitive touch screen. Erodov. (2010). Surface acoustic wave.
Sunday, June 16, 13
![Page 17: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/17.jpg)
Touch Screen cont.Technologies Resistive Capacitive Surface acoustic wave
Touch input Anything Finger only Works with some inputs
Detection technic Electric Voltage Electric Current Waveform
Material Plastic coated with glass Glass Glass
BuildEasyFlexible
HardBreakable
HardBreakable
Cost Cost effective Expensive Expensive
Pros- Durable- 30 Million hits- works with every input
- 90% of Opacity- 20 Million hits
- Clear and bright- 50 Million hits
Cons - 75-88% of brightness - Finger only- Use in clean environment- Finger and some object only
Sunday, June 16, 13
![Page 18: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/18.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 19: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/19.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 20: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/20.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 21: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/21.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 22: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/22.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 23: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/23.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 24: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/24.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 25: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/25.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 26: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/26.jpg)
Auxiliary features • Sensors
• Accelerometer
• Gyroscope
• Camera
• Magnetometer
• GPS / A-GPS
• Proximity
• AmbientSunday, June 16, 13
![Page 27: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/27.jpg)
IOS Framework
We will discuss later.Sunday, June 16, 13
![Page 28: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/28.jpg)
Human Computer Interaction
• Recommend to take A. Wasu’s class
• One hand operation for mobile phone
• Touch based input/Rarely use keypad or Joystick
• Using in short period of time
• Responsive Application
• Reduces mistakes in both input and output
• Immediate & reasonable feedback
Sunday, June 16, 13
![Page 29: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/29.jpg)
IOS Human Interface Guidelines
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.htmlhttp://developer.apple.com/library/ios/navigation/
Download
Sunday, June 16, 13
![Page 30: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/30.jpg)
IOS Human Interface Guidelines
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.htmlhttp://developer.apple.com/library/ios/navigation/
Download
Sunday, June 16, 13
![Page 31: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/31.jpg)
IOS Great Apps
• Based on Platform and HI Design
• Clear Definition
• Focuses on User Experience
• look from every corner
• Users like to see IOS technologies in Apps
• Custom Artwork
• We are Visual creature.
Sunday, June 16, 13
![Page 32: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/32.jpg)
IOS Platform
• Display means everything
• Visual
• Input & Output
• Content
• Rule of 44
• Portrait vs Land Scape
iPad 1024 x 768
iPad ret. 2048 x 1536
iPhone 320 x 480
iPhone 4 ret. 640 x 960
iPhone 5 ret. 1136 x 640
iPod Touch 320 x 480
Sunday, June 16, 13
![Page 33: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/33.jpg)
IOS Platform cont.
• Gestures action
• Tap
• Drag
• Flick
• Swipe
• Double tap
• Pinch
• Hold
• Shake
Sunday, June 16, 13
![Page 34: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/34.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 35: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/35.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 36: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/36.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 37: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/37.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 38: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/38.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 39: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/39.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 40: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/40.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 41: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/41.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 42: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/42.jpg)
IOS Platform
• One App at a time
• Single Window
• Multi-tasking
• Less Help
Sunday, June 16, 13
![Page 43: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/43.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 44: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/44.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 45: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/45.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 46: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/46.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 47: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/47.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 48: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/48.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 49: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/49.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 50: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/50.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 51: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/51.jpg)
IOS Apps Type
• Native Apps
• Web Apps
Sunday, June 16, 13
![Page 52: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/52.jpg)
HI Principles
• Aesthetic Integrity
• Consistency
• Direct Manipulation
• Feedback
• Metaphors
• User Control
Sunday, June 16, 13
![Page 53: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/53.jpg)
Aesthetic Integrity
• Beautiful, neat
• Productive
• Follows Standard
Sunday, June 16, 13
![Page 54: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/54.jpg)
Aesthetic Integrity
• Beautiful, neat
• Productive
• Follows Standard
Sunday, June 16, 13
![Page 55: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/55.jpg)
Aesthetic Integrity
• Beautiful, neat
• Productive
• Follows Standard
Sunday, June 16, 13
![Page 56: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/56.jpg)
Aesthetic Integrity
• Beautiful, neat
• Productive
• Follows Standard
Sunday, June 16, 13
![Page 57: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/57.jpg)
Aesthetic Integrity
• Beautiful, neat
• Productive
• Follows Standard
Sunday, June 16, 13
![Page 58: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/58.jpg)
Aesthetic Integrity
• Beautiful, neat
• Productive
• Follows Standard
Sunday, June 16, 13
![Page 59: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/59.jpg)
Consistency
• Standard = short learning curve
• UI & UX
• Color (iOS 7 precise color palette)
• Theme (iOS 7 simplicity)
• Font
Sunday, June 16, 13
![Page 60: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/60.jpg)
Consistency
• Standard = short learning curve
• UI & UX
• Color (iOS 7 precise color palette)
• Theme (iOS 7 simplicity)
• Font
Sunday, June 16, 13
![Page 61: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/61.jpg)
Consistency
• Standard = short learning curve
• UI & UX
• Color (iOS 7 precise color palette)
• Theme (iOS 7 simplicity)
• Font
Sunday, June 16, 13
![Page 62: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/62.jpg)
Direct Manipulation
• Actions => Results
• Sense of control
• touch object
• gestures (pinches to zoom)
• Immediate results
Sunday, June 16, 13
![Page 63: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/63.jpg)
Direct Manipulation
• Actions => Results
• Sense of control
• touch object
• gestures (pinches to zoom)
• Immediate results
Sunday, June 16, 13
![Page 64: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/64.jpg)
Feedback
• Immediate feedback
• Status
• Progress
• Animation
• Sound
• Vibration
Sunday, June 16, 13
![Page 65: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/65.jpg)
Metaphors• Virtual world <=> Real world
• Files & Folders
• Recycle Bin, Trash
• Telephone keypad
Sunday, June 16, 13
![Page 66: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/66.jpg)
Metaphors• Virtual world <=> Real world
• Files & Folders
• Recycle Bin, Trash
• Telephone keypad
Sunday, June 16, 13
![Page 67: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/67.jpg)
Metaphors• Virtual world <=> Real world
• Files & Folders
• Recycle Bin, Trash
• Telephone keypad
Sunday, June 16, 13
![Page 68: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/68.jpg)
Metaphors• Virtual world <=> Real world
• Files & Folders
• Recycle Bin, Trash
• Telephone keypad
Sunday, June 16, 13
![Page 69: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/69.jpg)
Metaphors• Virtual world <=> Real world
• Files & Folders
• Recycle Bin, Trash
• Telephone keypad
Sunday, June 16, 13
![Page 70: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/70.jpg)
User Control
• User initiate actions
• Empower
• Feels sense of control
• Warning / Avoid / Protect / Recover Errors
• Easy to understand / Predicable
• Confirm / Cancel Operation
• Confirm “Delete”
Sunday, June 16, 13
![Page 71: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/71.jpg)
Design Principles
• Creates App’s Definition
• Designs App for the device
• Customization
• Prototype
Sunday, June 16, 13
![Page 72: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/72.jpg)
Create App’s Definition
• Lists all features (wish list)
• Thinks out of box
• Knows your audience
• “Your App’s Features”
Sunday, June 16, 13
![Page 73: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/73.jpg)
Design App for the device
• Follows IOS UI
• Simple & Clear
• Universal Apps (iPhone iPad iPod)
Sunday, June 16, 13
![Page 74: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/74.jpg)
Web-Based Design
• Expectation of IOS App
• User can do something
• Touch based / Scroll
• Should provide Web App icon
Sunday, June 16, 13
![Page 75: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/75.jpg)
Customization
• Productive purposes
• Simple & Clear & Neat
• Reasonable
• Easy to Understand
Sunday, June 16, 13
![Page 76: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/76.jpg)
Prototype
• Tests App ideas
• Validates App’s functionality & user experience
• Uncovers something (features or bugs)
Sunday, June 16, 13
![Page 77: Wireless Application Design - Khon Kaen Universitywitcha/Witcha/Courses...Wireless Application Design Witcha Feungchan 2013 Sunday, June 16, 13 . Overview • Wireless Devices •](https://reader035.vdocuments.mx/reader035/viewer/2022070809/5f0831c37e708231d420ce6f/html5/thumbnails/77.jpg)
Case Study: IOS Apps
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.htmlhttp://developer.apple.com/library/ios/navigation/
Download
Sunday, June 16, 13