Wednesday, November 16, 2011

Designing for Mobile

I recently attended an Interactive Chat: Designing for Mobile at Hot Studio. This was perfect timing for me as a designer because I recently started designing for mobile. You can see some of my mobile designs here. This talk was PACKED with useful info and resources and I wanted to share it with all of you out there in blogland.

Speakers: John Gallant & Scott Tran

What's Hot Studio working on? Here are a few of the apps that Hot Studio has worked on. Check out these apps there is some pretty solid design here.

Pop Tech


Brooks Brothers

Other Apps with Good Design






Design Considerations 
Scanning Effect - Never feel lost in an app or website

Hands Per Device -

Design for Mobile first then other platforms next. This will keep your designs simple and focused.

Affordance – making sure there is enough space for the user to easily touch a button or hot spot with out accidently clicking on the wrong button.

Consistent Interactions – Apple has developed a set of consistent interactions throughout mobile devices. If you are going to stray from these interactions, there should be a good reason.

Content Delivery – Does my app need to be connected to the internet to work? This can interrupt user experience. Is my App gigantic due to all of the info people have to download? Will this cause users to abandon my app before it gets a chance to download?

Input Types – Mobile Forms. Make sure things are clear and there is a definite order to how you interact with input types. Put input info titles inside form boxes to save space.

Behaviors and Transitions – when you use your smartphone and you don’t get a typical user interaction it can be very confusing.

Compatibility – Make sure you know what types of devices and platforms you will be designing for.

Test and Refine – test your app or you are setting yourself up for failure. Keep your design focused and simple.

Hardware Features 
Think about all of the hardware features of your devices and how you can incorporate those features into your design.

Front and Rear cameras - augmented reality, remembering, video conferencing, optical recognition,

Microphone - voice recognition, siri

Headphone - sound output

Haptic technology - sense of touch, vibrating,

Accelerometer - measuring proper acceleration

Gyroscope – measuring or maintaining orientation

GPS – Location based services, fencing (keeping a child or pet in bounds)

NFC – near field communications, used in payment such as Google wallet

Bluetooth 4 – used in payment systems

Make sure gestures flow logically with what you are trying to design.
Common gestures: Tap, double tap, tap and hold, long hold, swipe, wipe, drag, pinch open, pinch closed, multi touch (using more then 2 fingers), flick, shaking

Web App Vs Native Apps
Where does your app exist?

Yelp has both. One on the web, and one that is only an app.

Go for simple. Web Apps typically load slower where a Native App can be faster.

Advantages to doing a Mobile Web app: it’s available because all Smartphone’s have a browser, its familiar to users, updates are quicker because you do not have to go through an app store

Advantages for Native Apps: Performance is better because info is not on the web, integration into the smartdevice hardware features ie: phone book, camera, see hardware features list

Hybrid app: Both Web and Native use, usually you can not tell this is happening.

Process and Teams
Waterfall process – User Experience, discovery sessions, project management, Engineering

What’s the great idea of the app?

What are the goals and needs for the app?

What is the environment where the app exists?

What is your device plan? What devices will you be using?

Design, prototyping,

Development, developers are a designer’s best friend

Testing and optimization

Tools for Developers
iOS Human Interface Guidelines

Mobile First by Luke Wroblewski

Wireframing tools for Interaction Designers
Visio for Microsoft

Omnigraffle for Mac

Adobe Illustrator

Adobe InDesign


Tools for Designers
Adobe Photoshop

Screen Resolutions for different devices at punchcut -

For iPhone designs start designing at retina resolution then use Unretiner a Mac App, to downsize all elements from iPhone 4 to iPhone 3 resolution

Icon generation from the Mac App store. Use Iconizer to generate all of the sizes for your icon that you will need to launch your app across platforms.

LiveView Screen Caster – Easily see your designs on your mobile device or tablet. Your best friend!

Air Display – Extend your desktop wirelessly to your iPad, iPhone, iPod touch, or Mac as a wireless display

Punchcut Templates

Sketching out your ideas – no link here, put your pen or pencil to paper and draw out your ideas first

Mobile Patterns – Like Pinterest for mobile apps, good to get ideas!

Teehan + Lax

Tools for Prototyping

GoodReader – Put your files on an FTP and use GoodReader to show clients

Minimal Folio

Tools for Engineers


iOS Simulator

App Sketch
Design a Coffee App so Zach can order and purchase the best cup of coffee. I sketched this App concept in 10 minutes at the talk. Really got me thinking.

No comments:

Related Posts Plugin for WordPress, Blogger...