visual design and mobile apps

79
Visual design - a key part of mobile apps Henrik Hedegaard Information Architect @henrikhedegaard

Upload: designit

Post on 08-May-2015

574 views

Category:

Design


0 download

DESCRIPTION

Visual Design and Mobile Apps

TRANSCRIPT

Page 1: Visual Design and Mobile Apps

Visual design - a key part of mobile apps

Henrik HedegaardInformation Architect

@henrikhedegaard

�������

Page 2: Visual Design and Mobile Apps

20YEARS

25NATIONS

250TOP BRAINS

Designit in numbers

Page 3: Visual Design and Mobile Apps

DENMARKNORWAY SWEDENGERMANY SPAINUNITED KINGDOM CHINA

BRAZILUNITED STATES JAPAN

09OFFICES

3NEW

+ 10COUNTRIES

Designit in numbers

Page 4: Visual Design and Mobile Apps

Our Collective Brain

Identify user needs Rethink & discover opportunities

Translate intonew services

Strategic-creative & user driven approach

User value createsbusiness value

Page 5: Visual Design and Mobile Apps

Service Delivery

User studies & ethnography Digital designBrand and communication

Service innovationProduct design & ergonomyDigital & product experiences

Page 6: Visual Design and Mobile Apps

Some of the clients

Page 7: Visual Design and Mobile Apps

Your choice…Prolong the pastOr make changes?

Page 8: Visual Design and Mobile Apps
Page 9: Visual Design and Mobile Apps
Page 10: Visual Design and Mobile Apps
Page 13: Visual Design and Mobile Apps

What is a good design?

Page 14: Visual Design and Mobile Apps

What is a good design?

This is actually a squirt gun

...for kids!!!

“FILL IT UP”

Press FIRE!!

“SHOOOT”

Page 15: Visual Design and Mobile Apps
Page 16: Visual Design and Mobile Apps

There is no SINGLE solutiononly pointers

Page 17: Visual Design and Mobile Apps

Considerations

DesirabilityApp must deliver real user value

ResponsibilityMust be a win-win and

develop sustainable end-user relations

Business Must be based on a

viable business model

FeasibilityMust be realistic from a technical perspective

Page 18: Visual Design and Mobile Apps

Process stakeholders

Develop Design BusinessFunction Form $$$$$

Page 19: Visual Design and Mobile Apps

We work for the end-user!

Page 20: Visual Design and Mobile Apps
Page 21: Visual Design and Mobile Apps

Potential for success when...- it solves my problem- it address my context- it has a great look & feel- it is easy to use- it has the right functionality- it performs great- it inspires me in my task

...and it make me WANT to use it again

Business, Branding & Marketing

Page 22: Visual Design and Mobile Apps

Who what where when and why

POINTERS IN MOBILE DESIGN

Page 23: Visual Design and Mobile Apps

The fat-finger problem

Page 24: Visual Design and Mobile Apps

The fat-finger problem

Page 25: Visual Design and Mobile Apps

Enrich standard navigation

Huffington Post

New York Times

Zite

Web-relation and totally ugly

Bad positioningSupplemented with pinch-gesture

Very usable, but uglySupplemented with tap-gesture

Page 26: Visual Design and Mobile Apps

Don’t Gesturize the App

Page 27: Visual Design and Mobile Apps

Consider Multi-User

Page 28: Visual Design and Mobile Apps

Consider Multi-User

Page 29: Visual Design and Mobile Apps

Custom pop-overs & modals

Page 30: Visual Design and Mobile Apps

Custom pop-overs & modals

Page 31: Visual Design and Mobile Apps

Engaging splash screens

Page 32: Visual Design and Mobile Apps

Engaging splash screens

Page 33: Visual Design and Mobile Apps

Engaging splash screens

Page 34: Visual Design and Mobile Apps

What’s touchable??

Page 35: Visual Design and Mobile Apps

Provide a “home” screen

NASA App

- One big mess- No overview

But only if you have the rightlevel of complexity

Page 36: Visual Design and Mobile Apps

Provide a “home” screen

Page 37: Visual Design and Mobile Apps

Provide a “home” screen

Page 38: Visual Design and Mobile Apps

Guide you user

Page 39: Visual Design and Mobile Apps

Guide you user

Page 40: Visual Design and Mobile Apps

- Goal: engaging self service apps- Goal: reduce service calls

- Minimal amount of buttons- Quick monitoring of usage- Quick history functionality- Quick statistical coloration- Simple mobile code / login

- Well-know interface standard

Simplify complexity

Page 41: Visual Design and Mobile Apps

The Extra 10%

Page 42: Visual Design and Mobile Apps

The Extra 10%

Page 43: Visual Design and Mobile Apps

10 Success Factors in IxD

LEARNABILITY

EFFICIENCY

MEMORABILITY

ERROR RECOVERY

SIMPLICITY

MAPPING VISIBILITY

FEEDBACK

CONSISTENCY

SATISFACTION

Page 44: Visual Design and Mobile Apps

WHEN IS OK, OK?

FORM & FUNCTION

Page 45: Visual Design and Mobile Apps

When to accept a functionality

Develop Design Business✔ ✔ ✔

Page 46: Visual Design and Mobile Apps

Print, as we knew it, is dead...

A DIGITAL ECO-SYSTEM

Page 47: Visual Design and Mobile Apps

A digital eco-system

Page 48: Visual Design and Mobile Apps
Page 49: Visual Design and Mobile Apps
Page 50: Visual Design and Mobile Apps
Page 51: Visual Design and Mobile Apps

Service integration

- Same UI universe- Same visual style- Same metaphores

- Different interactions- Different context- Diffrent technology

Page 52: Visual Design and Mobile Apps

An inclusive strategy

Page 53: Visual Design and Mobile Apps

Services with purpose

Regular websitesResponsive webdesign

Web-appsHybrid appsNative apps

Page 54: Visual Design and Mobile Apps

SmartPhone, Tablet, Responsive webdesign

Jyske Bank

Page 55: Visual Design and Mobile Apps

Jyske Bank - Digital Strategy

2008 - New website

2010 - Mobile Currency calculator (iPhone)

2010 - Mobile Banking (iPhone + Android)

2011 - Responsive webdesign

2011 - Mobile Banking (iPad)

Page 56: Visual Design and Mobile Apps
Page 57: Visual Design and Mobile Apps
Page 58: Visual Design and Mobile Apps
Page 59: Visual Design and Mobile Apps
Page 60: Visual Design and Mobile Apps
Page 61: Visual Design and Mobile Apps
Page 62: Visual Design and Mobile Apps
Page 63: Visual Design and Mobile Apps
Page 64: Visual Design and Mobile Apps
Page 65: Visual Design and Mobile Apps
Page 66: Visual Design and Mobile Apps
Page 67: Visual Design and Mobile Apps
Page 68: Visual Design and Mobile Apps
Page 69: Visual Design and Mobile Apps
Page 70: Visual Design and Mobile Apps
Page 71: Visual Design and Mobile Apps
Page 72: Visual Design and Mobile Apps
Page 73: Visual Design and Mobile Apps
Page 74: Visual Design and Mobile Apps
Page 75: Visual Design and Mobile Apps
Page 76: Visual Design and Mobile Apps
Page 77: Visual Design and Mobile Apps
Page 78: Visual Design and Mobile Apps

Submitted to App Store

Page 79: Visual Design and Mobile Apps

http://smallsurfaces.com/http://www.simplecue.com/http://powazek.com/posts/2583