This document provides an overview of designing mobile applications. It discusses the various sensors available on smartphones and how to design interfaces that are optimized for mobile. It also presents a case study of the QUT Nav application, which was designed to help users navigate Queensland University of Technology's campus. The development process involved sketching designs, building iterations, and testing with users to incorporate feedback before public release. Key considerations for mobile design discussed include screen size, orientation, touch targets, and following platform-specific human interface guidelines.

1. INB386 - Week 8
Copyright © 2013 Tony Wang.
Designing for Mobile
Tony Wang
PhD Candidate & iOS Developer

2. Overview
•What smartphones can do
•How to design for mobile phones
•Case Study: QUT Nav

3. Video

5. What can smartphones do?
•Today’s Weather
•Birthday today
•Restaurants nearby
•Food intake
•Fashion advice
•Movie rating
•Map direction
•Tracking Time
•lots lots more....

6. Sensors on Mobile
•Global Positioning System (GPS)
•Accelerometer
•Gyroscope / Compass
•Ambient sensor
•Proximity sensor
•Camera
•Bluetooth
•Near field communication (NFC)
•Microphone
•Flash ?!

7. Activity

8. Brainstorm
•What other sensors are there?
•What they can be used for?
Group came up with the most sensors wins!

10. in Windows Phone Store
160,000
June 2013
http://www.wpcentral.com/160000-apps-microsoft-windows-phone-store-numbers

11. in App Store
900,000
June 2013
http://ipod.about.com/od/iphonesoftwareterms/qt/apps-in-app-store.htm

12. in App S
1,000,000
July 2013
http://readwrite.com/2013/07/24/google-play-hits-one-million-android-apps#awesm=~ogCv8lW3mTQS3t

13. Activity

14. 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

15. 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.

16. Apps I use everyday
Sunrise Prismatic Go Brisbane Reminders

17. Shazam
Apps I find Innovative
Instant
Heart Rate
Yahoo
Weather
Qwiki

18. Video

20. Designing for Mobile

21. Must Keep In Mind
Mobile Computer/Laptop≠

22. •Device
• iPhone / iPad / iPod Touch
• HTC
• Google Nexus
Know what you are working with

23. Know what you are working with
•Screen size / Retina / PPI
• Tablets
• Phones

24. Storyboarding
Screen Flow

25. Target Size & Positioning
•Standard finger 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

26. Orientation
•Portrait vs Landscape

27. Human Interface Guidelines

28. Human Interface Guidelines
Think like a user
Finger-tip size
Technology usage
UI Elements
Images guidelines

29. Tools for Designers
Photoshop Slicy Skala Preview

30. QUT Nav
Project Tirect

31. Where is everything?

32. How to get there?

33. How to avoid getting wet?

35. QUT Nav Team
•Team of 7
•1 x Team Leader / Designer
•2 x Programmers
•4 x Cartographers

36. Features: Plan it
•View campus map
•Search for buildings
•See the photo of the buildings
•Get walking directions

37. Design: Sketch it

39. Design: Sketch it

40. Developer: Build it.

42. 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.

43. Main Screen

46. Search Screen

49. Side Bar

52. Road to Public Releases
•7 versions before release to public

53. Available on the App Store

54. Tony Wang
@svveet
QUT Nav
tony.wang@qut.com