visual design and mobile apps
DESCRIPTION
Visual Design and Mobile AppsTRANSCRIPT
![Page 1: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/1.jpg)
Visual design - a key part of mobile apps
Henrik HedegaardInformation Architect
@henrikhedegaard
�������
![Page 2: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/2.jpg)
20YEARS
25NATIONS
250TOP BRAINS
Designit in numbers
![Page 3: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/3.jpg)
DENMARKNORWAY SWEDENGERMANY SPAINUNITED KINGDOM CHINA
BRAZILUNITED STATES JAPAN
09OFFICES
3NEW
+ 10COUNTRIES
Designit in numbers
![Page 4: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/4.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/5.jpg)
Service Delivery
User studies & ethnography Digital designBrand and communication
Service innovationProduct design & ergonomyDigital & product experiences
![Page 6: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/6.jpg)
Some of the clients
![Page 7: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/7.jpg)
Your choice…Prolong the pastOr make changes?
![Page 8: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/8.jpg)
![Page 9: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/9.jpg)
![Page 10: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/10.jpg)
![Page 11: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/11.jpg)
http://www.realmacsoftware.com/clear/
![Page 12: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/12.jpg)
http://www.realmacsoftware.com/clear/
![Page 13: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/13.jpg)
What is a good design?
![Page 14: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/14.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/15.jpg)
![Page 16: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/16.jpg)
There is no SINGLE solutiononly pointers
![Page 17: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/17.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/18.jpg)
Process stakeholders
Develop Design BusinessFunction Form $$$$$
![Page 19: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/19.jpg)
We work for the end-user!
![Page 20: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/20.jpg)
![Page 21: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/21.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/22.jpg)
Who what where when and why
POINTERS IN MOBILE DESIGN
![Page 23: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/23.jpg)
The fat-finger problem
![Page 24: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/24.jpg)
The fat-finger problem
![Page 25: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/25.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/26.jpg)
Don’t Gesturize the App
![Page 27: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/27.jpg)
Consider Multi-User
![Page 28: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/28.jpg)
Consider Multi-User
![Page 29: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/29.jpg)
Custom pop-overs & modals
![Page 30: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/30.jpg)
Custom pop-overs & modals
![Page 31: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/31.jpg)
Engaging splash screens
![Page 32: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/32.jpg)
Engaging splash screens
![Page 33: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/33.jpg)
Engaging splash screens
![Page 34: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/34.jpg)
What’s touchable??
![Page 35: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/35.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/36.jpg)
Provide a “home” screen
![Page 37: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/37.jpg)
Provide a “home” screen
![Page 38: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/38.jpg)
Guide you user
![Page 39: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/39.jpg)
Guide you user
![Page 40: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/40.jpg)
- 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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/41.jpg)
The Extra 10%
![Page 42: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/42.jpg)
The Extra 10%
![Page 43: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/43.jpg)
10 Success Factors in IxD
LEARNABILITY
EFFICIENCY
MEMORABILITY
ERROR RECOVERY
SIMPLICITY
MAPPING VISIBILITY
FEEDBACK
CONSISTENCY
SATISFACTION
![Page 44: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/44.jpg)
WHEN IS OK, OK?
FORM & FUNCTION
![Page 45: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/45.jpg)
When to accept a functionality
Develop Design Business✔ ✔ ✔
![Page 46: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/46.jpg)
Print, as we knew it, is dead...
A DIGITAL ECO-SYSTEM
![Page 47: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/47.jpg)
A digital eco-system
![Page 48: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/48.jpg)
![Page 49: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/49.jpg)
![Page 50: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/50.jpg)
![Page 51: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/51.jpg)
Service integration
- Same UI universe- Same visual style- Same metaphores
- Different interactions- Different context- Diffrent technology
![Page 52: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/52.jpg)
An inclusive strategy
![Page 53: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/53.jpg)
Services with purpose
Regular websitesResponsive webdesign
Web-appsHybrid appsNative apps
![Page 54: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/54.jpg)
SmartPhone, Tablet, Responsive webdesign
Jyske Bank
![Page 55: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/55.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/56.jpg)
![Page 57: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/57.jpg)
![Page 58: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/58.jpg)
![Page 59: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/59.jpg)
![Page 60: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/60.jpg)
![Page 61: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/61.jpg)
![Page 62: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/62.jpg)
![Page 63: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/63.jpg)
![Page 64: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/64.jpg)
![Page 65: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/65.jpg)
![Page 66: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/66.jpg)
![Page 67: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/67.jpg)
![Page 68: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/68.jpg)
![Page 69: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/69.jpg)
![Page 70: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/70.jpg)
![Page 71: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/71.jpg)
![Page 72: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/72.jpg)
![Page 73: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/73.jpg)
![Page 74: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/74.jpg)
![Page 75: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/75.jpg)
![Page 76: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/76.jpg)
![Page 77: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/77.jpg)
![Page 78: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/78.jpg)
Submitted to App Store
![Page 79: Visual Design and Mobile Apps](https://reader036.vdocument.in/reader036/viewer/2022062404/554bc842b4c9053a298b5859/html5/thumbnails/79.jpg)
http://smallsurfaces.com/http://www.simplecue.com/http://powazek.com/posts/2583