what makes your app grouse - #appfest sydney
Post on 22-Oct-2014
965 views
DESCRIPTION
My design keynote presentation from Microsoft #appfest in Sydney February 2013TRANSCRIPT
![Page 2: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/2.jpg)
I KNOW, YOU JUST WANT
TO START CODING
![Page 3: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/3.jpg)
FEATURES-OUT?OR PEOPLE-IN?
![Page 4: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/4.jpg)
A BIT ABOUT ME
![Page 5: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/5.jpg)
SOME GROUSE APPSCOCKTAIL FLOW (WINDOWS 8) QANTAS (WINDOWS PHONE)
![Page 6: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/6.jpg)
WHAT MAKES THOSE APPS
GROUSE?
![Page 7: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/7.jpg)
WHAT WE SAWMINIMALISMVISUALFUNCTIONAL
STANDARDSCONSISTENCY
DISCOVERABILITY
ORIENTATIONSHALLOW NAVIGATIONHEADINGSBACKTRANSITIONS
WHAT MAKES THOSE APPS GROUSE?
GROUSE:VISUALLYFUNCTIONALLY
![Page 8: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/8.jpg)
A GROUSE USER EXPERIENCEPETER MERHOLZ
![Page 9: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/9.jpg)
THE RIGHT…
IDEA(Start here)
STRUCTURE
INTERFACE
VISUALS
(THEN CODE… )
A GROUSE USER EXPERIENCE
Conceptual design
Visual design
![Page 10: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/10.jpg)
‘BEST APP’ STATEMENT
CONCEPTUAL DESIGN
![Page 11: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/11.jpg)
“MY APP IS THE BEST APP
FOR…”DO ONE THING WELL
![Page 12: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/12.jpg)
EXERCISEMY APP IS THE BEST APP FOR…
![Page 13: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/13.jpg)
“DO MORE WITH LESS”
WINDOWS DESIGN PRINCIPLE
![Page 14: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/14.jpg)
THE RIGHT…
IDEA(Start here)
STRUCTURE
INTERFACE
VISUALS
(THEN CODE… )
A GROUSE USER EXPERIENCE
Conceptual design
Visual design
![Page 15: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/15.jpg)
PLANNING YOUR APP’S UXPROCESS
![Page 16: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/16.jpg)
PLANNING YOUR APP’S UXPROCESS
![Page 17: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/17.jpg)
PLANNING YOUR APP’S UX1. DECIDE WHAT YOUR APP IS GREAT AT
2. DECIDE WHAT USER ACTIVITIES TO SUPPORT
3. DECIDE WHAT FEATURES TO INCLUDE
4. DECIDE HOW TO MONETIZE YOUR APP
5. DESIGN THE UI FOR YOUR APP
6. MAKE A GOOD FIRST IMPRESSION
7. PROTOTYPE AND VALIDATE YOUR DESIGN
PROCESS
msdn.microsoft.com/en-US/library/windows/apps/hh465427
![Page 18: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/18.jpg)
PLANNING YOUR APP’S UX1. DECIDE WHAT YOUR APP IS GREAT AT
2. DECIDE WHAT USER ACTIVITIES TO SUPPORT
3. DECIDE WHAT FEATURES TO INCLUDE
4. DECIDE HOW TO MONETIZE YOUR APP
5. DESIGN THE UI FOR YOUR APP
6. MAKE A GOOD FIRST IMPRESSION
7. PROTOTYPE AND VALIDATE YOUR DESIGN
PROCESS
msdn.microsoft.com/en-US/library/windows/apps/hh465427
![Page 19: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/19.jpg)
EXERCISELIST ALL THE THINGS SCENARIOS USERS CAN COMPLETE WITH YOUR APP.
ALL SENTENCES START WITH “USERS CAN…”
![Page 20: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/20.jpg)
NOW YOU HAVE
YOUR USER SCENARIOS…
PLEASE REMOVE HALFEXAMINE YOUR ‘BEST APP’ STATEMENT
![Page 21: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/21.jpg)
INFORMATION DESIGN
![Page 22: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/22.jpg)
INFORMATION DESIGN
Conceptual design
Visual design
![Page 23: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/23.jpg)
NAVIGATION
![Page 24: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/24.jpg)
HIERARCHICAL NAVIGATIONINFORMATION DESIGN
Hub
Section
Detail
![Page 25: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/25.jpg)
‘DEFAULT’ NAVIGATION STRUCTURE
WINDOWS 8
HUB SECTION DETAIL
INFORMATION DESIGN
WINDOWS PHONE
PANORAMA PIVOT PAGE
![Page 26: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/26.jpg)
HUBS AND
PANORAMAS
![Page 27: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/27.jpg)
HUB / PANORAMA TIPSTHE APP’S VALUE PROPOSITION SHOULD BE IMMEDIATELY CLEARTHINK “MAGAZINE COVER”REFLECT THE START SCREEN TILES AND CONTENT
MAKE IT CLEAR THERE IS MORE CONTENT OFF THE EDGE“PEEK”DON’T BE PREDICTABLE IF CONTENT IS NOT PREDICTABLE
YOU DON’T HAVE TO DEFAULT TO THE FIRST PANEL(PHONE)
INFORMATION DESIGN
NON-STANDARD GROUP SIZES ARE OK
PAY ATTENTION TO READING ORDERA LIST IS BETTER IF THERE IS AN IMPLIED ORDER.
MINIMISE INTERACTIVITYAVOID GESTURES THAT INTERFERE WITH PANNING THE PANORAMA
DON’T USE CONTROLS TO NAVIGATE WITHIN THE PANORAMA
![Page 28: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/28.jpg)
EXERCISESKETCH OUT YOUR NAVIGATION STRUCTURELOOK AT YOUR KEY SCENARIOS
![Page 29: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/29.jpg)
INTERACTION DESIGN
![Page 30: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/30.jpg)
INTERACTION DESIGN
Conceptual design
Visual design
![Page 31: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/31.jpg)
INTERACTION DESIGN TIPSCONTENT AS CONTROLS“DIRECT MANIPULATION”
MOVE OTHER COMMANDS OFF THE CANVASCharmsApp BarContext menus…Except where you can’t…
TOUCHTARGET SIZEREACHOCCLUSION
![Page 32: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/32.jpg)
VISUAL DESIGN
![Page 33: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/33.jpg)
VISUAL DESIGN
Conceptual design
Visual design
![Page 34: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/34.jpg)
VISUAL MINIMALISM
EVERY ELEMENT SHOULD BE ABLE TO JUSTIFY IT’S EXISTENCETO SOLVE A LAYOUT PROBLEM, TRY REMOVING PIXELS, NOT ADDING THEM
![Page 35: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/35.jpg)
PRO TIP leave s**t outVISUAL DESIGN
![Page 36: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/36.jpg)
PRO TIP turn s**t downVISUAL DESIGN
![Page 37: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/37.jpg)
TEMPLATES AND GRIDS
THE STANDARD TEMPLATES ARE A GOOD START
![Page 38: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/38.jpg)
GRIDSVISUAL DESIGN
![Page 39: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/39.jpg)
GRIDSVISUAL DESIGN
![Page 40: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/40.jpg)
![Page 41: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/41.jpg)
GRIDSVISUAL DESIGN
![Page 42: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/42.jpg)
PRO TIP line s**t upVISUAL DESIGN
![Page 43: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/43.jpg)
PRO TIP space s**t evenlyVISUAL DESIGN
![Page 44: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/44.jpg)
VISUALHIERARCHY
USE VISUALS TO EXPLAIN THE STRUCTURE OF YOUR PAGE
![Page 45: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/45.jpg)
VISUAL HIERARCHY
COMMUNICATE A CLEAR HIERARCHY OF INFORMATION
TOOLSTYPOGRAPHY size colour weightALIGNMENTWHITESPACE
VISUAL DESIGN
size
colour
CASE
alignment alignmentweight
proximitycolour
proximity
![Page 46: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/46.jpg)
VISUAL HIERARCHY
USE TYPOGRAPHY TO COMMUNICATE THE HIERARCHY OF INFORMATION Experiment with font weight and colour,
rather than introducing additional font sizes.
TAKE ADVANTAGE OF BUILT-IN STYLES IN EXPRESSION BLEND / VISUAL STUDIO
VISUAL DESIGN
![Page 47: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/47.jpg)
PRO TIP group s**tand sub-group s**t
VISUAL DESIGN
![Page 48: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/48.jpg)
ELEGANT VARIATION
STRIVE FOR MEANINGFUL VARIETY
![Page 49: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/49.jpg)
![Page 50: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/50.jpg)
![Page 51: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/51.jpg)
PRO TIP mix s**t upVISUAL DESIGN
![Page 52: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/52.jpg)
COLOUR
![Page 53: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/53.jpg)
BRAND COLOURSVISUAL DESIGN
![Page 54: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/54.jpg)
HOW MANY COLOURS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER
VISUAL DESIGN
1 (S**T)
5(GROUSE)
THAT’S HOW MANY COLOURS YOU SHOULD USE
(PLUS BLACK AND WHITE)
![Page 55: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/55.jpg)
BUT I REALLY NEED MORE COLOURS!USE SHADES OF THE ONE COLOUR
HOW MANY COLOURS SHOULD I USE?
KULER.ADOBE.COM
![Page 56: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/56.jpg)
PRO TIP you don’t need a s**tload of colours
VISUAL DESIGN
![Page 57: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/57.jpg)
FOREGROUND AND BACKGROUND COLOURSCOOL COLOURS IN THE BACKGROUND
HOT COLOURS IN THE FOREGROUND
![Page 58: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/58.jpg)
PRO TIP hot colours look s**thouse in the background
VISUAL DESIGN
![Page 59: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/59.jpg)
FONTS
![Page 60: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/60.jpg)
HOW MANY FONTS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER
VISUAL DESIGN
1 (S**T)
5(GROUSE)
1
![Page 61: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/61.jpg)
WHAT FONTS SHOULD I USE?WINDOWS PHONESEGOE WP
WINDOWS 8SEGOE UI CAMBRIAReadingCALLIBRIReading and Writing
VISUAL DESIGN
STANDARD FONT SIZES AND WEIGHTS ARE PROVIDED IN THE TEMPLATESDON’T VARY FROM THEM
IF YOU HAVE A COMPANY/BRAND FONTYOU CAN USE IT FOR MAJOR HEADINGS… if it is easy to distinguish from Segoe
![Page 62: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/62.jpg)
![Page 63: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/63.jpg)
PRO TIP segoe is the s**tVISUAL DESIGN
![Page 64: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/64.jpg)
YOUR APP LOOKS GROUSEWITH A BEAUTIFUL PHOTO IN THE BACKGROUND
BLAND APP?
![Page 65: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/65.jpg)
PRO TIP get a s**t-hot photo
VISUAL DESIGN
![Page 66: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/66.jpg)
RECAP
![Page 67: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/67.jpg)
PRO TIPSLEAVE S**T OUT
TURN S**T DOWN
LINE S**T UP
SPACE S**T EVENLY
GROUP S**TAND SUB-GROUP S**T
MIX S**T UP
YOU DON’T NEED A S**T-LOAD OF COLOURS
HOT COLOURS LOOK S**THOUSE IN THE BACKGROUND
SEGOE IT THE S**T
GET A S**T-HOT PHOTO
GROUSE APPS
PEOPLE-IN, NOT FUNCTIONS-OUT
FOLLOW THE GUIDELINES!DESIGN.WINDOWS.COMDEV.WINDOWSPHONE.COM/DESIGN
![Page 68: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/68.jpg)
WHAT NEXT?
![Page 69: What makes your app grouse - #appfest Sydney](https://reader034.vdocuments.us/reader034/viewer/2022052503/54474411b1af9f0f098b45f9/html5/thumbnails/69.jpg)
WHAT NEXT?
BEFORE YOU START CODING…CULL YOUR FEATURESSKETCH THE PAGE STRUCTURE AND NAVIGATION OF YOUR APPGROUP INFORMATION WITHIN PAGES
AS YOU CODE…THINK ABOUT The information hierarchy on your pages Templates, grids and alignment Standards and consistency
SOLVE DESIGN PROBLEMS BY REMOVING DETAIL, NOT ADDING
WHAT MAKES YOUR APP GROUSE?