WHAT MAKES  YOUR APP  GROUSE?             Shane Morris             shane@automaticstudio.com.au             @shanemo
I KNOW, YOU  JUST WANT    TO START     CODING
FEATURES-     OUT?            OR PEOPLE-IN?
A BIT ABOUT ME
SOME GROUSE APPSCOCKTAIL FLOW (WINDOWS 8)   QANTAS (WINDOWS PHONE)
WHAT MAKESTHOSE APPS  GROUSE?
WHAT MAKES THOSE APPS GROUSE?WHAT WE SAWMINIMALISM                      GROUSE:VISUAL                          VISUALLYFUN...
PETER MERHOLZA GROUSE USER EXPERIENCE
A GROUSE USER EXPERIENCETHE RIGHT…                                          Conceptual                                  ID...
„BEST APP‟STATEMENT              CONCEPTUAL DESIGN
“MY APP IS THE     BEST APP       FOR…”                 DO ONE THING WELL
EXERCISE           MY APP IS THE BEST           APP FOR…
“DO MORE WITH         LESS”                 WINDOWS DESIGN                 PRINCIPLE
A GROUSE USER EXPERIENCETHE RIGHT…                                          Conceptual                                  ID...
PROCESSPLANNING YOUR APP‟S UX
PROCESSPLANNING YOUR APP‟S UX
PROCESSPLANNING YOUR APP‟S UX1. DECIDE WHAT YOUR APP IS GREAT AT               2. DECIDE WHAT USER ACTIVITIES TO SUPPORT3...
PROCESSPLANNING YOUR APP‟S UX1. DECIDE WHAT YOUR APP IS GREAT AT               2. DECIDE WHAT USER ACTIVITIES TO SUPPORT3...
EXERCISE           LIST ALL THE THINGS SCENARIOS           USERS CAN COMPLETE WITH           YOUR APP.           ALL SENTE...
NOW   YOU HAVE YOUR USERSCENARIOS…              PLEASE REMOVE HALF              EXAMINE YOUR „BEST APP‟              STATE...
INFORMATION     DESIGN
ConceptualINFORMATION     design     DESIGN   Information                 design
NAVIGATION
INFORMATION DESIGNHIERARCHICAL NAVIGATION                       Hub                     Section                      Detail
INFORMATION DESIGN„DEFAULT‟ NAVIGATION STRUCTUREWINDOWS 8            WINDOWS PHONEHUB                  PANORAMA SECTION   ...
HUBS      ANDPANORAMAS
INFORMATION DESIGNHUB / PANORAMA TIPSTHE APP‟S VALUE PROPOSITION SHOULD BE         NON-STANDARD GROUP SIZES ARE OKIMMEDIAT...
EXERCISE           SKETCH OUT YOUR NAVIGATION           STRUCTURE           LOOK AT YOUR KEY SCENARIOS
INTERACTION     DESIGN
Conceptual                designINTERACTION   Information                 design     DESIGN   Interaction                d...
INTERACTION DESIGN TIPSCONTENT AS CONTROLS                  TOUCH“DIRECT MANIPULATION”                TARGET SIZE         ...
VISUAL DESIGN
Conceptual                  design                Information                   designVISUAL DESIGN   Interaction         ...
VISUALMINIMALISM             EVERY ELEMENT SHOULD BE ABLE             TO JUSTIFY IT‟S EXISTENCE             TO SOLVE A LAY...
VISUAL DESIGNPRO TIP          leave s**t out
VISUAL DESIGNPRO TIP          turn s**t down
TEMPLATES AND GRIDS             THE STANDARD TEMPLATES             ARE A GOOD START
VISUAL DESIGNGRIDS
VISUAL DESIGNGRIDS
VISUAL DESIGNGRIDS
VISUAL DESIGNPRO TIP          line s**t up
VISUAL DESIGNPRO TIP          space s**t evenly
VISUALHIERARCHY             USE VISUALS TO EXPLAIN THE             STRUCTURE OF YOUR PAGE
VISUAL DESIGNVISUAL HIERARCHY                                CASECOMMUNICATE A CLEAR HIERARCHYOF INFORMATIONTOOLS         ...
VISUAL DESIGNVISUAL HIERARCHYUSE TYPOGRAPHY TO COMMUNICATE THEHIERARCHY OF INFORMATION Experiment with font weight and co...
VISUAL DESIGNPRO TIP          group s**t                 and sub-group s**t
ELEGANTVARIATION            STRIVE FOR MEANINGFUL            VARIETY
VISUAL DESIGNPRO TIP          mix s**t up
COLOUR
VISUAL DESIGNBRAND COLOURS
VISUAL DESIGNHOW MANY COLOURS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1                       THAT‟S HOW MANY COLO...
HOW MANY COLOURS SHOULD I USE?BUT I REALLY NEED MORE COLOURS!USE SHADES OF THE ONE COLOUR     KULER.ADOBE.COM
VISUAL DESIGNPRO TIP          you don‟t need a s**tload                 of colours
FOREGROUND AND BACKGROUNDCOLOURSCOOL COLOURS IN THE BACKGROUNDHOT COLOURS IN THE FOREGROUND
VISUAL DESIGNPRO TIP          hot colours look s**thouse                 in the background
FONTS
VISUAL DESIGNHOW MANY FONTS SHOULD I USE?RATE YOURSELF AS A GRAPHIC DESIGNER1(S**T)                                      1...
VISUAL DESIGNWHAT FONTS SHOULD I USE?WINDOWS PHONE         STANDARD FONT SIZES AND WEIGHTS ARESEGOE WP              PROVID...
VISUAL DESIGNPRO TIP          segoe is the s**t
BLAND  APP?         YOUR APP LOOKS GROUSE         WITH A BEAUTIFUL         PHOTO IN THE         BACKGROUND
VISUAL DESIGNPRO TIP          get a s**t-hot                 photo
RECAP
GROUSE APPSPRO TIPSLEAVE S**T OUT                          PEOPLE-IN, NOT FUNCTIONS-OUTTURN S**T DOWN                     ...
WHATNEXT?
WHAT MAKES YOUR APP GROUSE?WHAT NEXT?BEFORE YOU START CODING…CULL YOUR FEATURESSKETCH THE PAGE STRUCTURE AND NAVIGATION OF...
What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest Sydney
Upcoming SlideShare
Loading in...5
×

What makes your app grouse - #appfest Sydney

727

Published on

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

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
727
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • XXX grouse pic?
  • Xxx Diagram fromtechedXxx or transition 2nd point
  • XXX phone pics
  • AndReliableAdaptableThe right offeringDelivered the right way
  • Your turnChris Bernard: This app is the best app in its category at ___________
  • Functional MinimalismHave an identity in the store
  • Best app statement is about starting with people and a problem.Not starting with codeNot even starting with colours, fonts and logos
  • People-in
  • After the break:- we’ll get on to layout.
  • Functional minimalism, as well as VisualRemove features
  • A grab-bag of tips
  • A grab-bag of pro-tips
  • A grab-bag of pro-tips
  • Templates
  • Metro uses large blocks of bright colourBut We don’t want an angry fruit salad
  • Especially if you’re not confident
  • Even though I said be minimalist,One thing that you have to communicate is the structure
  • The page should have a topography
  • Nuclear option
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×