Designing for Mobile
description
Transcript of Designing for Mobile
INB386 - Week 8
Copyright © 2013 Tony Wang.
Designing for Mobile
Tony WangPhD Candidate & iOS Developer
Overview
•What smartphones can do
•How to design for mobile phones
• Case Study: QUT Nav
Video
What can smartphones do?
• Today’s Weather
• Birthday today
• Restaurants nearby
• Food intake
• Fashion advice
•Movie rating
•Map direction
• Tracking Time
• lots lots more....
Sensors on Mobile
•Global Positioning System (GPS)
• Accelerometer
•Gyroscope / Compass
• Ambient sensor
• Proximity sensor
• Camera
• Bluetooth
•Near !eld communication (NFC)
•Microphone
• Flash ?!
Activity
Brainstorm
•What other sensors are there?
•What they can be used for?
Group came up with the most sensors wins!
in Windows Phone Store
160,000
June 2013http://www.wpcentral.com/160000-apps-microsoft-windows-phone-store-numbers
in App Store
900,000
June 2013http://ipod.about.com/od/iphonesoftwareterms/qt/apps-in-app-store.htm
in App S
1,000,000
July 2013http://readwrite.com/2013/07/24/google-play-hits-one-million-android-apps#awesm=~ogCv8lW3mTQS3t
Activity
Before we start
• You will need:
• Your smartphone
• Pen & Paper
•Write down a list
• Apps you use everyday
• Apps that are innovative
• Apps that are useful
Next on the list
•Why do you use it everyday?
• e.g. Personal routine, or hobbit.
•Why do you think they are innovative?
• e.g. Interface, presentation.
Apps I use everyday
Sunrise Prismatic Go Brisbane Reminders
Shazam
Apps I !nd Innovative
InstantHeart Rate
Yahoo Weather
Qwiki
Video
Designing for Mobile
Must Keep In Mind
Mobile Computer/Laptop≠
•Device
• iPhone / iPad / iPod Touch
• HTC
• Google Nexus
Know what you are working with
Know what you are working with
• Screen size / Retina / PPI
• Tablets
• Phones
Storyboarding
Screen Flow
Target Size & Positioning
• Standard !nger size is 44x44 pt
• Buttons
• Switches
• Sliders
• Avoid putting small touch targets close together
• Accidental taps
• Delete and Save buttons sitting next to each other is probably a bad idea.
44 44
Orientation
• Portrait vs Landscape
Human Interface Guidelines
Human Interface Guidelines
Think like a user
Finger-tip size
Technology usage
UI Elements
Images guidelines
Tools for Designers
Photoshop Slicy Skala Preview
QUT Nav Project Tirect
Where is everything?
How to get there?
How to avoid getting wet?
QUT Nav Team
• Team of 7
• 1 x Team Leader / Designer
• 2 x Programmers
• 4 x Cartographers
Features: Plan it
• View campus map
• Search for buildings
• See the photo of the buildings
•Get walking directions
Design: Sketch it
Design: Sketch it
Developer: Build it.
User: Test it
• It is important to test with real users.
•More feedback the better.
•Not everyone will like it, but choose the most appropriate one.
Main Screen
Search Screen
Side Bar
Road to Public Releases
• 7 versions before release to public
Available on the App Store