Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What makes your app grouse - #appfest Sydney

1,251 views

Published on

My design keynote presentation from Microsoft #appfest in Sydney February 2013

Published in: Design
  • Be the first to comment

What makes your app grouse - #appfest Sydney

  1. 1. WHAT MAKES YOUR APP GROUSE? Shane Morris shane@automaticstudio.com.au @shanemo
  2. 2. I KNOW, YOU JUST WANT TO START CODING
  3. 3. FEATURES- OUT? OR PEOPLE-IN?
  4. 4. A BIT ABOUT ME
  5. 5. SOME GROUSE APPSCOCKTAIL FLOW (WINDOWS 8) QANTAS (WINDOWS PHONE)
  6. 6. WHAT MAKESTHOSE APPS GROUSE?
  7. 7. WHAT MAKES THOSE APPS GROUSE?WHAT WE SAWMINIMALISM GROUSE:VISUAL VISUALLYFUNCTIONAL FUNCTIONALLYSTANDARDSCONSISTENCYDISCOVERABILITYORIENTATIONSHALLOW NAVIGATIONHEADINGSBACKTRANSITIONS
  8. 8. PETER MERHOLZA GROUSE USER EXPERIENCE
  9. 9. A GROUSE USER EXPERIENCETHE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
  10. 10. „BEST APP‟STATEMENT CONCEPTUAL DESIGN
  11. 11. “MY APP IS THE BEST APP FOR…” DO ONE THING WELL
  12. 12. EXERCISE MY APP IS THE BEST APP FOR…
  13. 13. “DO MORE WITH LESS” WINDOWS DESIGN PRINCIPLE
  14. 14. A GROUSE USER EXPERIENCETHE RIGHT… Conceptual IDEA design (Start here) Information STRUCTURE design INTERFACE Interaction design VISUALS Visual design (THEN CODE… )
  15. 15. PROCESSPLANNING YOUR APP‟S UX
  16. 16. PROCESSPLANNING YOUR APP‟S UX
  17. 17. PROCESSPLANNING YOUR APP‟S UX1. DECIDE WHAT YOUR APP IS GREAT AT 2. DECIDE WHAT USER ACTIVITIES TO SUPPORT3. DECIDE WHAT FEATURES TO INCLUDE4. DECIDE HOW TO MONETIZE YOUR APP5. DESIGN THE UI FOR YOUR APP6. MAKE A GOOD FIRST IMPRESSION7. PROTOTYPE AND VALIDATE YOUR DESIGN msdn.microsoft.com/en-US/library/windows/apps/hh465427
  18. 18. PROCESSPLANNING YOUR APP‟S UX1. DECIDE WHAT YOUR APP IS GREAT AT 2. DECIDE WHAT USER ACTIVITIES TO SUPPORT3. DECIDE WHAT FEATURES TO INCLUDE4. DECIDE HOW TO MONETIZE YOUR APP5. DESIGN THE UI FOR YOUR APP6. MAKE A GOOD FIRST IMPRESSION7. PROTOTYPE AND VALIDATE YOUR DESIGN msdn.microsoft.com/en-US/library/windows/apps/hh465427
  19. 19. EXERCISE LIST ALL THE THINGS SCENARIOS USERS CAN COMPLETE WITH YOUR APP. ALL SENTENCES START WITH “USERS CAN…”
  20. 20. NOW YOU HAVE YOUR USERSCENARIOS… PLEASE REMOVE HALF EXAMINE YOUR „BEST APP‟ STATEMENT
  21. 21. INFORMATION DESIGN
  22. 22. ConceptualINFORMATION design DESIGN Information design
  23. 23. NAVIGATION
  24. 24. INFORMATION DESIGNHIERARCHICAL NAVIGATION Hub Section Detail
  25. 25. INFORMATION DESIGN„DEFAULT‟ NAVIGATION STRUCTUREWINDOWS 8 WINDOWS PHONEHUB PANORAMA SECTION PIVOT DETAIL PAGE
  26. 26. HUBS ANDPANORAMAS
  27. 27. INFORMATION DESIGNHUB / PANORAMA TIPSTHE APP‟S VALUE PROPOSITION SHOULD BE NON-STANDARD GROUP SIZES ARE OKIMMEDIATELY CLEAR PAY ATTENTION TO READING ORDERTHINK “MAGAZINE COVER” A LIST IS BETTER IF THERE IS AN IMPLIEDREFLECT THE START SCREEN TILES AND ORDER.CONTENT MINIMISE INTERACTIVITYMAKE IT CLEAR THERE IS MORE CONTENT OFF THEEDGE AVOID GESTURES THAT INTERFERE WITH PANNING THE PANORAMA“PEEK”DON‟T BE PREDICTABLE IF CONTENT IS NOT DON‟T USE CONTROLS TO NAVIGATE WITHIN THEPREDICTABLE PANORAMAYOU DON‟T HAVE TO DEFAULT TO THEFIRST PANEL(PHONE)
  28. 28. EXERCISE SKETCH OUT YOUR NAVIGATION STRUCTURE LOOK AT YOUR KEY SCENARIOS
  29. 29. INTERACTION DESIGN
  30. 30. Conceptual designINTERACTION Information design DESIGN Interaction design
  31. 31. INTERACTION DESIGN TIPSCONTENT AS CONTROLS TOUCH“DIRECT MANIPULATION” TARGET SIZE REACHMOVE OTHER COMMANDS OFF THE CANVAS OCCLUSIONCharmsApp BarContext menus…Except where you can‟t…
  32. 32. VISUAL DESIGN
  33. 33. Conceptual design Information designVISUAL DESIGN Interaction design Visual design
  34. 34. VISUALMINIMALISM EVERY ELEMENT SHOULD BE ABLE TO JUSTIFY IT‟S EXISTENCE TO SOLVE A LAYOUT PROBLEM, TRY REMOVING PIXELS, NOT ADDING THEM
  35. 35. VISUAL DESIGNPRO TIP leave s**t out
  36. 36. VISUAL DESIGNPRO TIP turn s**t down
  37. 37. TEMPLATES AND GRIDS THE STANDARD TEMPLATES ARE A GOOD START
  38. 38. VISUAL DESIGNGRIDS
  39. 39. VISUAL DESIGNGRIDS
  40. 40. VISUAL DESIGNGRIDS
  41. 41. VISUAL DESIGNPRO TIP line s**t up
  42. 42. VISUAL DESIGNPRO TIP space s**t evenly
  43. 43. VISUALHIERARCHY USE VISUALS TO EXPLAIN THE STRUCTURE OF YOUR PAGE
  44. 44. VISUAL DESIGNVISUAL HIERARCHY CASECOMMUNICATE A CLEAR HIERARCHYOF INFORMATIONTOOLS sizeTYPOGRAPHY size weight colour alignment alignment weightALIGNMENT proximity proximityWHITESPACE colour colour
  45. 45. VISUAL DESIGNVISUAL HIERARCHYUSE TYPOGRAPHY TO COMMUNICATE THEHIERARCHY OF INFORMATION Experiment with font weight and colour, rather than introducing additional font sizes.TAKE ADVANTAGE OF BUILT-IN STYLES INEXPRESSION BLEND / VISUAL STUDIO
  46. 46. VISUAL DESIGNPRO TIP group s**t and sub-group s**t
  47. 47. ELEGANTVARIATION STRIVE FOR MEANINGFUL VARIETY
  48. 48. VISUAL DESIGNPRO TIP mix s**t up
  49. 49. COLOUR
  50. 50. VISUAL DESIGNBRAND COLOURS
  51. 51. VISUAL DESIGNHOW MANY COLOURS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1 THAT‟S HOW MANY COLOURS YOU SHOULD USE 5 (PLUS BLACK AND WHITE)(S**T) (GROUSE)
  52. 52. HOW MANY COLOURS SHOULD I USE?BUT I REALLY NEED MORE COLOURS!USE SHADES OF THE ONE COLOUR KULER.ADOBE.COM
  53. 53. VISUAL DESIGNPRO TIP you don‟t need a s**tload of colours
  54. 54. FOREGROUND AND BACKGROUNDCOLOURSCOOL COLOURS IN THE BACKGROUNDHOT COLOURS IN THE FOREGROUND
  55. 55. VISUAL DESIGNPRO TIP hot colours look s**thouse in the background
  56. 56. FONTS
  57. 57. VISUAL DESIGNHOW MANY FONTS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1(S**T) 1 5 (GROUSE)
  58. 58. VISUAL DESIGNWHAT FONTS SHOULD I USE?WINDOWS PHONE STANDARD FONT SIZES AND WEIGHTS ARESEGOE WP PROVIDED IN THE TEMPLATES DON‟T VARY FROM THEMWINDOWS 8 IF YOU HAVE A COMPANY/BRAND FONTSEGOE UI YOU CAN USE IT FOR MAJOR HEADINGS…CAMBRIA if it is easy to distinguish from SegoeReadingCALLIBRIReading and Writing
  59. 59. VISUAL DESIGNPRO TIP segoe is the s**t
  60. 60. BLAND APP? YOUR APP LOOKS GROUSE WITH A BEAUTIFUL PHOTO IN THE BACKGROUND
  61. 61. VISUAL DESIGNPRO TIP get a s**t-hot photo
  62. 62. RECAP
  63. 63. GROUSE APPSPRO TIPSLEAVE S**T OUT PEOPLE-IN, NOT FUNCTIONS-OUTTURN S**T DOWN FOLLOW THE GUIDELINES!LINE S**T UP DESIGN.WINDOWS.COM DEV.WINDOWSPHONE.COM/DESIGNSPACE S**T EVENLYGROUP S**TAND SUB-GROUP S**TMIX S**T UPYOU DON‟T NEED A S**T-LOAD OF COLOURSHOT COLOURS LOOK S**THOUSEIN THE BACKGROUNDSEGOE IT THE S**TGET A S**T-HOT PHOTO
  64. 64. WHATNEXT?
  65. 65. WHAT MAKES YOUR APP GROUSE?WHAT NEXT?BEFORE YOU START CODING…CULL YOUR FEATURESSKETCH THE PAGE STRUCTURE AND NAVIGATION OF YOUR APPGROUP INFORMATION WITHIN PAGESAS YOU CODE…THINK ABOUT The information hierarchy on your pages Templates, grids and alignment Standards and consistencySOLVE DESIGN PROBLEMS BY REMOVING DETAIL, NOT ADDING

×