Windows phone UI Design Guidelines

4,965
-1

Published on

Published in: Design, Business
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,965
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Windows phone UI Design Guidelines

  1. 1. designingforwindowsphoneby Neelima Salvi
  2. 2. objective learn, implement & deliver the bestSource: User Experience Design Guidelines for Windows Phonehttp://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
  3. 3. metrolanguage
  4. 4. © microsoft
  5. 5. focus onUser ExperienceVisual DesignApplication Goal
  6. 6. common examplewe use ketchup bottles
  7. 7. who amongst usNever struggledwith a ketchup bottle?
  8. 8. which of these two bottles isEASIER to get the ketchup out from?
  9. 9. userexperience
  10. 10. 1
  11. 11. 2
  12. 12. 3
  13. 13. 4
  14. 14. 5
  15. 15. 6
  16. 16. is this awindow
  17. 17. visualdesign
  18. 18. What if you do not target the red marked area?
  19. 19. achievinggoal
  20. 20. focus onUser ExperienceVisual DesignApplication Goal
  21. 21. clear accessibleeasy usable
  22. 22. theming Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
  23. 23. blue bluered redmango mangogreen greenmagenta magentapurple purplelime limeteal tealbrown brownpink dark pink light
  24. 24. theming
  25. 25. theming
  26. 26. start tile
  27. 27. start tile x
  28. 28. splashscreen
  29. 29. splash screen x
  30. 30. segoe WP
  31. 31. text sizelowercaseexception of section titlesif brand guidelines insiston a different case, thenensure that the use of thecase is consistent acrossthe app.
  32. 32. Visuallanguage
  33. 33. visual languagemetroicons
  34. 34. visual languageforeground or background color of a control
  35. 35. visual languagex
  36. 36. 1simple color 2dimensional
  37. 37. composition
  38. 38. element alignment element spacing
  39. 39. element alignmentA B
  40. 40. element alignment 24px 24pxx
  41. 41. element alignment ELEMENT SPACINGDETAILS DETAILS DETAILSname lara sheffer name lara sheffer name lara sheffertelephone 3652466 telephone 3652466birthday 1 January 1980 birthday 1 January 1980 telephone 3652466address 3 East 54th Street address 3 East 54th Street 18th Floor 18th Floor New York, NY 10022, New York, NY 10022, birthday USA. USA. 1 January 1980 address 3 East 54th Street 18th Floor New York, NY 10022, USA. A B C
  42. 42. element alignment ELEMENT SPACINGDETAILS DETAILS DETAILSname lara sheffer name lara sheffer name lara sheffertelephone 3652466 telephone 3652466birthday 1 January 1980 birthday 1 January 1980 telephone 3652466address 3 East 54th Street address 3 East 54th Street 18th Floor 18th Floor New York, NY New York, NY 10022, birthday 10022, USA. USA. 1 January 1980 address 3 East 54th Street 18th Floor New York, NY 10022, USA. x
  43. 43. element spacing ELEMENT SPACINGPICTURES PICTURES A B
  44. 44. element spacing ELEMENT SPACINGPICTURES PICTURES x
  45. 45. element spacing ELEMENT SPACINGDETAILS DETAILSname lara sheffer name lara sheffer telephone 3652466telephone 3652466 birthday 1 January 1980birthday 1 January 1980 address 3 East 54th Street 18th Flooraddress 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. A B
  46. 46. element spacing ELEMENT SPACINGDETAILS DETAILSname lara sheffer name lara sheffer telephone 3652466telephone 3652466 birthday 1 January 1980birthday 1 January 1980 address 3 East 54th Street 18th Flooraddress 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. x
  47. 47. buttons placementamsterdam amsterdamlorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit amet, consecteturadipiscing elit. Nulla sollicitudin pulvinar adipiscing elit. Nulla sollicitudin pulvinarelit eu vestibulum elit eu vestibulum ok ok x
  48. 48. don’tbreak theGRID
  49. 49. lists adorners ELEMENT SPACINGshare share sharefacebook > facebook f facebooktwitter > twitter t twitteremail > email emailfavorite > favorite favorite A B C
  50. 50. lists adorners ELEMENT SPACINGshare share sharefacebook > facebook f facebooktwitter > twitter t twitteremail > email emailfavorite > favorite favorite x
  51. 51. feedback controls color ELEMENT SPACINGshare sharef facebook f facebookt twitter t email email favorite favorite A B
  52. 52. feedback controls colorshare sharef facebook f facebookt twitter t email email favorite favorite x
  53. 53. feedback controls buttonLOCATION LOCATIONamsterdam amsterdamBoerhaavelaan 7, Boerhaavelaan 7,2500 DL Den Haag 2500 DL Den HaagApollolaan 138 Amsterdam Apollolaan 138 AmsterdamNetherlands Netherlands change change x
  54. 54. feedback controls button ELEMENT SPACI -LOCATIONamsterdamBoerhaavelaan 7,2500 DL Den HaagApollolaan 138 AmsterdamNetherlands
  55. 55. there is noselected state
  56. 56. headingsheadings should be left alignedshould not have backgrounds,borders, underline, or any otherkind of decoration.
  57. 57. headingsthe exception to this is panorama pane titles, which may usecorporate branding.
  58. 58. pivot controls pivot pages ELEMENT SPACINGall pivot controls should have at least two pages in them
  59. 59. pivot controls master-detail view ELEMENT SPACINGx the pivotfilter-results viewnever be used as wizard.master-detail, control should or as steps in a a
  60. 60. pivot controls master-detail view ELEMENT SPACINGpivots should contain pages of homogenous information, like tabs.
  61. 61. pivot controls controls not permitted in pivots ELEMENT SPACINGx toggle switchesx slidersx map controlsx browser controlx horizontally scrollable area or a horizontal swipe gesture
  62. 62. panorama controls scrollable panesSPACING ELEMENTpanorama panes should either scroll vertically or horizontally. not both.
  63. 63. panorama controls scrollable panesSPACING ELEMENTx panorama panes should either scroll vertically or horizontally. not both.
  64. 64. panorama controls floating buttonsSPACING ELEMENTx
  65. 65. panorama controls controls not permitted ELEMENT SPACINGx toggle switchesx slidersx map controlsx browser controlx application bars are not permitted on panorama controls.
  66. 66. dialog boxes placementdelete deleteare you sure to delete this record? are you sure to delete this record? yes no yes no x
  67. 67. language & tone
  68. 68. language & tone error message Contents NDP1. 1sp 1.x Unhandled Exception KB2416447_x86_ wrapper log Error C0000005 version bd ok ok do not use computer jargon, hexadecimal error codes, or text that assumes technical knowledge.
  69. 69. language & tone error message make sure you typed the make sure you typed the name correctly, and then name correctly, and then try again. try again. ok okdon’t forget that users are human beings ;)
  70. 70. typos
  71. 71. typosx the app should not have any spelling mistakes. Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.
  72. 72. pagetransitions
  73. 73. page transitions
  74. 74. TY neelima salvithank you! Design Consultant@amileens neelima.salvi@gmail.com

×