visual design - a key part of mobile apps

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

Upload: henrik-hedegaard

Post on 08-May-2015

175 views

Category:

Design


0 download

DESCRIPTION

Visual design - a key part of mobile apps Presented at Designit, feb. 2012 In relation to GOTO Meet-up with Trifork

TRANSCRIPT

Page 1: Visual design - a key part of mobile apps

Visual design - a key part of mobile apps

Henrik HedegaardInformation Architect

@henrikhedegaard

Twitter

Page 2: Visual design - a key part of mobile apps

20YEARS

25NATIONS

250TOP BRAINS

Designit in numbers

Page 3: Visual design - a key part of mobile apps

DENMARKNORWAY SWEDENGERMANY SPAINUNITED KINGDOM CHINA

BRAZILUNITED STATES JAPAN

09OFFICES

3NEW

+ 10COUNTRIES

Designit in numbers

Page 4: Visual design - a key part of 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 - a key part of mobile apps

Service Delivery

User studies & ethnography Digital designBrand and communication

Service innovationProduct design & ergonomyDigital & product experiences

Page 6: Visual design - a key part of mobile apps

Some of the clients

Page 7: Visual design - a key part of mobile apps
Page 8: Visual design - a key part of mobile apps

Your choice…Prolong the pastOr make changes?

Page 9: Visual design - a key part of mobile apps
Page 10: Visual design - a key part of mobile apps
Page 11: Visual design - a key part of mobile apps
Page 15: Visual design - a key part of mobile apps

What is a good design?

Page 16: Visual design - a key part of mobile apps

What is a good design?

Page 17: Visual design - a key part of mobile apps

What is a good design?

This is actually a squirt gun

...for kids!!!

Page 18: Visual design - a key part of mobile apps

What is a good design?

This is actually a squirt gun

...for kids!!!

“FILL IT UP”

Press FIRE!!

“SHOOOT”

Page 19: Visual design - a key part of mobile apps
Page 20: Visual design - a key part of mobile apps

There is no SINGLE solutiononly pointers

Page 21: Visual design - a key part of mobile apps

Considerations

Page 22: Visual design - a key part of mobile apps

Considerations

Business Must be based on a

viable business model

Page 23: Visual design - a key part of mobile apps

Considerations

Business Must be based on a

viable business model

FeasibilityMust be realistic from a technical perspective

Page 24: Visual design - a key part of mobile apps

Considerations

DesirabilityApp must deliver real user value

Business Must be based on a

viable business model

FeasibilityMust be realistic from a technical perspective

Page 25: Visual design - a key part of 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 26: Visual design - a key part of mobile apps

Process stakeholders

Develop Design Business

Page 27: Visual design - a key part of mobile apps

Process stakeholders

Develop Design BusinessFunction Form $$$$$

Page 28: Visual design - a key part of mobile apps

We work for the end-user!

Page 29: Visual design - a key part of mobile apps

We work for the end-user!

Page 30: Visual design - a key part of mobile apps
Page 31: Visual design - a key part of 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

Page 32: Visual design - a key part of 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 33: Visual design - a key part of mobile apps

Who what where when and why

POINTERS IN MOBILE DESIGN

Page 34: Visual design - a key part of mobile apps

The fat-finger problem

Page 35: Visual design - a key part of mobile apps

The fat-finger problem

Page 36: Visual design - a key part of mobile apps

The fat-finger problem

Page 37: Visual design - a key part of mobile apps

The fat-finger problem

Page 38: Visual design - a key part of 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 39: Visual design - a key part of mobile apps

Don’t Gesturize the App

Page 40: Visual design - a key part of mobile apps

Don’t Gesturize the App

Page 41: Visual design - a key part of mobile apps

Don’t Gesturize the App

Page 42: Visual design - a key part of mobile apps

Consider Multi-User

Page 43: Visual design - a key part of mobile apps

Consider Multi-User

Page 44: Visual design - a key part of mobile apps

Custom pop-overs & modals

Page 45: Visual design - a key part of mobile apps

Custom pop-overs & modals

Page 46: Visual design - a key part of mobile apps

Engaging splash screens

Page 47: Visual design - a key part of mobile apps

Engaging splash screens

Page 48: Visual design - a key part of mobile apps

Engaging splash screens

Page 49: Visual design - a key part of mobile apps

What’s touchable??

Page 50: Visual design - a key part of mobile apps

What’s touchable??

Page 51: Visual design - a key part of mobile apps

What’s touchable??

Page 52: Visual design - a key part of mobile apps

Provide a “home” screen

NASA App

- One big mess- No overview

But only if you have the rightlevel of complexity

Page 53: Visual design - a key part of mobile apps

Provide a “home” screen

Page 54: Visual design - a key part of mobile apps

Provide a “home” screen

Page 55: Visual design - a key part of mobile apps

Provide a “home” screen

Page 56: Visual design - a key part of mobile apps

Guide you user

Page 57: Visual design - a key part of mobile apps

Guide you user

Page 58: Visual design - a key part of 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 59: Visual design - a key part of mobile apps

The Extra 10%

Page 60: Visual design - a key part of mobile apps

The Extra 10%

Page 61: Visual design - a key part of mobile apps

10 Success Factors in IxD

LEARNABILITY

EFFICIENCY

MEMORABILITY

ERROR RECOVERY

SIMPLICITY

MAPPING VISIBILITY

FEEDBACK

CONSISTENCY

SATISFACTION

Page 62: Visual design - a key part of mobile apps

WHEN IS OK, OK?

FORM & FUNCTION

Page 63: Visual design - a key part of mobile apps

When to accept a functionality

Develop Design Business

Page 64: Visual design - a key part of mobile apps

When to accept a functionality

Develop Design Business✔ ✔ ✔

Page 65: Visual design - a key part of mobile apps

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

A DIGITAL ECO-SYSTEM

Page 66: Visual design - a key part of mobile apps

A digital eco-system

Page 67: Visual design - a key part of mobile apps
Page 68: Visual design - a key part of mobile apps
Page 69: Visual design - a key part of mobile apps
Page 70: Visual design - a key part of mobile apps

Service integration

- Same UI universe- Same visual style- Same metaphores

- Different interactions- Different context- Diffrent technology

Page 71: Visual design - a key part of mobile apps

An inclusive strategy

Page 72: Visual design - a key part of mobile apps

Services with purpose

Regular websitesResponsive webdesign

Web-appsHybrid appsNative apps

Page 73: Visual design - a key part of mobile apps

Jyske Bank Case Study

NEXT

Page 74: Visual design - a key part of mobile apps

HAVE A BREAK

Page 75: Visual design - a key part of mobile apps

HAVE A BREAK

Page 76: Visual design - a key part of mobile apps

SmartPhone, Tablet, Responsive webdesign

Jyske Bank

Page 77: Visual design - a key part of 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 78: Visual design - a key part of mobile apps
Page 79: Visual design - a key part of mobile apps
Page 80: Visual design - a key part of mobile apps
Page 81: Visual design - a key part of mobile apps
Page 82: Visual design - a key part of mobile apps
Page 83: Visual design - a key part of mobile apps
Page 84: Visual design - a key part of mobile apps
Page 85: Visual design - a key part of mobile apps
Page 86: Visual design - a key part of mobile apps
Page 87: Visual design - a key part of mobile apps
Page 88: Visual design - a key part of mobile apps
Page 89: Visual design - a key part of mobile apps
Page 90: Visual design - a key part of mobile apps
Page 91: Visual design - a key part of mobile apps
Page 92: Visual design - a key part of mobile apps
Page 93: Visual design - a key part of mobile apps
Page 94: Visual design - a key part of mobile apps
Page 95: Visual design - a key part of mobile apps
Page 96: Visual design - a key part of mobile apps
Page 97: Visual design - a key part of mobile apps
Page 98: Visual design - a key part of mobile apps
Page 99: Visual design - a key part of mobile apps
Page 100: Visual design - a key part of mobile apps
Page 101: Visual design - a key part of mobile apps
Page 102: Visual design - a key part of mobile apps
Page 103: Visual design - a key part of mobile apps
Page 104: Visual design - a key part of mobile apps
Page 105: Visual design - a key part of mobile apps
Page 106: Visual design - a key part of mobile apps
Page 107: Visual design - a key part of mobile apps
Page 108: Visual design - a key part of mobile apps
Page 109: Visual design - a key part of mobile apps
Page 110: Visual design - a key part of mobile apps
Page 111: Visual design - a key part of mobile apps
Page 112: Visual design - a key part of mobile apps
Page 113: Visual design - a key part of mobile apps
Page 114: Visual design - a key part of mobile apps
Page 115: Visual design - a key part of mobile apps
Page 116: Visual design - a key part of mobile apps

Submitted to App Store

Page 117: Visual design - a key part of mobile apps

Thanks

Page 118: Visual design - a key part of mobile apps

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