Designing for Mobile

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

description

Guest Lecture for INB386 - Advanced Multimedia Systems - September 2013 at Queensland University of Technology, Brisbane, Australia.

Transcript of Designing for Mobile

Page 1: Designing for Mobile

INB386 - Week 8

Copyright © 2013 Tony Wang.

Designing for Mobile

Tony WangPhD Candidate & iOS Developer

Page 2: Designing for Mobile

Overview

•What smartphones can do

•How to design for mobile phones

• Case Study: QUT Nav

Page 3: Designing for Mobile

Video

Page 4: Designing for Mobile
Page 5: Designing for Mobile

What can smartphones do?

• Today’s Weather

• Birthday today

• Restaurants nearby

• Food intake

• Fashion advice

•Movie rating

•Map direction

• Tracking Time

• lots lots more....

Page 6: Designing for Mobile

Sensors on Mobile

•Global Positioning System (GPS)

• Accelerometer

•Gyroscope / Compass

• Ambient sensor

• Proximity sensor

• Camera

• Bluetooth

•Near !eld communication (NFC)

•Microphone

• Flash ?!

Page 7: Designing for Mobile

Activity

Page 8: Designing for Mobile

Brainstorm

•What other sensors are there?

•What they can be used for?

Group came up with the most sensors wins!

Page 9: Designing for Mobile
Page 10: Designing for Mobile

in Windows Phone Store

160,000

June 2013http://www.wpcentral.com/160000-apps-microsoft-windows-phone-store-numbers

Page 11: Designing for Mobile

in App Store

900,000

June 2013http://ipod.about.com/od/iphonesoftwareterms/qt/apps-in-app-store.htm

Page 12: Designing for Mobile

in App S

1,000,000

July 2013http://readwrite.com/2013/07/24/google-play-hits-one-million-android-apps#awesm=~ogCv8lW3mTQS3t

Page 13: Designing for Mobile

Activity

Page 14: Designing for Mobile

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

Page 15: Designing for Mobile

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.

Page 16: Designing for Mobile

Apps I use everyday

Sunrise Prismatic Go Brisbane Reminders

Page 17: Designing for Mobile

Shazam

Apps I !nd Innovative

InstantHeart Rate

Yahoo Weather

Qwiki

Page 18: Designing for Mobile

Video

Page 19: Designing for Mobile
Page 20: Designing for Mobile

Designing for Mobile

Page 21: Designing for Mobile

Must Keep In Mind

Mobile Computer/Laptop≠

Page 22: Designing for Mobile

•Device

• iPhone / iPad / iPod Touch

• HTC

• Google Nexus

Know what you are working with

Page 23: Designing for Mobile

Know what you are working with

• Screen size / Retina / PPI

• Tablets

• Phones

Page 24: Designing for Mobile

Storyboarding

Screen Flow

Page 25: Designing for Mobile

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

Page 26: Designing for Mobile

Orientation

• Portrait vs Landscape

Page 27: Designing for Mobile

Human Interface Guidelines

Page 28: Designing for Mobile

Human Interface Guidelines

Think like a user

Finger-tip size

Technology usage

UI Elements

Images guidelines

Page 29: Designing for Mobile

Tools for Designers

Photoshop Slicy Skala Preview

Page 30: Designing for Mobile

QUT Nav Project Tirect

Page 31: Designing for Mobile

Where is everything?

Page 32: Designing for Mobile

How to get there?

Page 33: Designing for Mobile

How to avoid getting wet?

Page 34: Designing for Mobile
Page 35: Designing for Mobile

QUT Nav Team

• Team of 7

• 1 x Team Leader / Designer

• 2 x Programmers

• 4 x Cartographers

Page 36: Designing for Mobile

Features: Plan it

• View campus map

• Search for buildings

• See the photo of the buildings

•Get walking directions

Page 37: Designing for Mobile

Design: Sketch it

Page 38: Designing for Mobile
Page 39: Designing for Mobile

Design: Sketch it

Page 40: Designing for Mobile

Developer: Build it.

Page 41: Designing for Mobile
Page 42: Designing for Mobile

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.

Page 43: Designing for Mobile

Main Screen

Page 44: Designing for Mobile
Page 45: Designing for Mobile
Page 46: Designing for Mobile

Search Screen

Page 47: Designing for Mobile
Page 48: Designing for Mobile
Page 49: Designing for Mobile

Side Bar

Page 50: Designing for Mobile
Page 51: Designing for Mobile
Page 52: Designing for Mobile

Road to Public Releases

• 7 versions before release to public

Page 53: Designing for Mobile

Available on the App Store