ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Windows phone UI Design Guidelines

?
?
N
Neelima Salvi

The document provides guidelines for designing user experiences for Windows Phone applications. It discusses principles like focusing on user experience and visual design, using the Metro design language, following best practices for visual elements like alignment and spacing, and using appropriate language and tone. Specific guidelines covered include using consistent theming, appropriate use of pivots and panoramas, placement of buttons and dialog boxes, and avoiding typos. The overall goal is to design intuitive, usable experiences for Windows Phone.

1 of 79
designing for windows phone by Neelima Salvi
objective learn, implement & deliver the best Source: User Experience Design Guidelines for Windows Phone http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
metro language
Windows phone UI Design Guidelines
? microsoft
focus on User Experience Visual Design Application Goal
common example we use ketchup bottles
who amongst us Never struggled with a ketchup bottle?
which of these two bottles is EASIER to get the ketchup out from?
user experience
1
2
3
4
5
6
is this a window
visual design
What if you do not target the red marked area?
achieving goal
focus on User Experience Visual Design Application Goal
clear accessible easy usable
theming Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
Windows phone UI Design Guidelines
blue blue red red mango mango green green magenta magenta purple purple lime lime teal teal brown brown pink dark pink light
theming
theming
start tile
start tile x
splash screen
splash screen x
Windows phone UI Design Guidelines
segoe WP
text size lowercase exception of section titles if brand guidelines insist on a different case, then ensure that the use of the case is consistent across the app.
Windows phone UI Design Guidelines
Visual language
visual language metro icons
visual language foreground or background color of a control
visual language x
1 simple color 2 dimensional
composition
element alignment element spacing
element alignment A B
element alignment 24px 24px x
element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 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
element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 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
element spacing ELEMENT SPACING PICTURES PICTURES A B
element spacing ELEMENT SPACING PICTURES PICTURES x
element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. A B
element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. x
buttons placement amsterdam amsterdam lorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin pulvinar adipiscing elit. Nulla sollicitudin pulvinar elit eu vestibulum elit eu vestibulum ok ok x
Windows phone UI Design Guidelines
don¡¯t break the GRID
lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite A B C
lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite x
feedback controls color ELEMENT SPACING share share f facebook f facebook t twitter t email email favorite favorite A B
feedback controls color share share f facebook f facebook t twitter t email email favorite favorite x
feedback controls button LOCATION LOCATION amsterdam amsterdam Boerhaavelaan 7, Boerhaavelaan 7, 2500 DL Den Haag 2500 DL Den Haag Apollolaan 138 Amsterdam Apollolaan 138 Amsterdam Netherlands Netherlands change change x
feedback controls button ELEMENT SPACI - LOCATION amsterdam Boerhaavelaan 7, 2500 DL Den Haag Apollolaan 138 Amsterdam Netherlands
there is no selected state
headings headings should be left aligned should not have backgrounds, borders, underline, or any other kind of decoration.
headings the exception to this is panorama pane titles, which may use corporate branding.
pivot controls pivot pages ELEMENT SPACING all pivot controls should have at least two pages in them
pivot controls master-detail view ELEMENT SPACING x the pivotfilter-results viewnever be used as wizard. master-detail, control should or as steps in a a
pivot controls master-detail view ELEMENT SPACING pivots should contain pages of homogenous information, like tabs.
pivot controls controls not permitted in pivots ELEMENT SPACING x toggle switches x sliders x map controls x browser control x horizontally scrollable area or a horizontal swipe gesture
panorama controls scrollable panesSPACING ELEMENT panorama panes should either scroll vertically or horizontally. not both.
panorama controls scrollable panesSPACING ELEMENT x panorama panes should either scroll vertically or horizontally. not both.
panorama controls floating buttonsSPACING ELEMENT x
panorama controls controls not permitted ELEMENT SPACING x toggle switches x sliders x map controls x browser control x application bars are not permitted on panorama controls.
dialog boxes placement delete delete are you sure to delete this record? are you sure to delete this record? yes no yes no x
language & tone
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.
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 ok don¡¯t forget that users are human beings ;)
typos
typos x the app should not have any spelling mistakes. Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.
page transitions
page transitions
TY neelima salvi thank you! Design Consultant @amileens neelima.salvi@gmail.com

More Related Content

Windows phone UI Design Guidelines

  • 2. objective learn, implement & deliver the best Source: User Experience Design Guidelines for Windows Phone http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
  • 6. focus on User Experience Visual Design Application Goal
  • 7. common example we use ketchup bottles
  • 8. who amongst us Never struggled with a ketchup bottle?
  • 9. which of these two bottles is EASIER to get the ketchup out from?
  • 11. 1
  • 12. 2
  • 13. 3
  • 14. 4
  • 15. 5
  • 16. 6
  • 19. What if you do not target the red marked area?
  • 21. focus on User Experience Visual Design Application Goal
  • 22. clear accessible easy usable
  • 23. theming Photo Credit: http://poojycat.wordpress.com/2012/08/23/which-mask/
  • 25. blue blue red red mango mango green green magenta magenta purple purple lime lime teal teal brown brown pink dark pink light
  • 34. text size lowercase exception of section titles if brand guidelines insist on a different case, then ensure that the use of the case is consistent across the app.
  • 38. visual language foreground or background color of a control
  • 40. 1 simple color 2 dimensional
  • 42. element alignment element spacing
  • 44. element alignment 24px 24px x
  • 45. element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 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
  • 46. element alignment ELEMENT SPACING DETAILS DETAILS DETAILS name lara sheffer name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 telephone 3652466 address 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
  • 47. element spacing ELEMENT SPACING PICTURES PICTURES A B
  • 48. element spacing ELEMENT SPACING PICTURES PICTURES x
  • 49. element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. A B
  • 50. element spacing ELEMENT SPACING DETAILS DETAILS name lara sheffer name lara sheffer telephone 3652466 telephone 3652466 birthday 1 January 1980 birthday 1 January 1980 address 3 East 54th Street 18th Floor address 3 East 54th Street New York, NY 10022, 18th Floor USA. New York, NY 10022, USA. x
  • 51. buttons placement amsterdam amsterdam lorem ipsum dolor sit amet, consectetur lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sollicitudin pulvinar adipiscing elit. Nulla sollicitudin pulvinar elit eu vestibulum elit eu vestibulum ok ok x
  • 54. lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite A B C
  • 55. lists adorners ELEMENT SPACING share share share facebook > facebook f facebook twitter > twitter t twitter email > email email favorite > favorite favorite x
  • 56. feedback controls color ELEMENT SPACING share share f facebook f facebook t twitter t email email favorite favorite A B
  • 57. feedback controls color share share f facebook f facebook t twitter t email email favorite favorite x
  • 58. feedback controls button LOCATION LOCATION amsterdam amsterdam Boerhaavelaan 7, Boerhaavelaan 7, 2500 DL Den Haag 2500 DL Den Haag Apollolaan 138 Amsterdam Apollolaan 138 Amsterdam Netherlands Netherlands change change x
  • 59. feedback controls button ELEMENT SPACI - LOCATION amsterdam Boerhaavelaan 7, 2500 DL Den Haag Apollolaan 138 Amsterdam Netherlands
  • 61. headings headings should be left aligned should not have backgrounds, borders, underline, or any other kind of decoration.
  • 62. headings the exception to this is panorama pane titles, which may use corporate branding.
  • 63. pivot controls pivot pages ELEMENT SPACING all pivot controls should have at least two pages in them
  • 64. pivot controls master-detail view ELEMENT SPACING x the pivotfilter-results viewnever be used as wizard. master-detail, control should or as steps in a a
  • 65. pivot controls master-detail view ELEMENT SPACING pivots should contain pages of homogenous information, like tabs.
  • 66. pivot controls controls not permitted in pivots ELEMENT SPACING x toggle switches x sliders x map controls x browser control x horizontally scrollable area or a horizontal swipe gesture
  • 67. panorama controls scrollable panesSPACING ELEMENT panorama panes should either scroll vertically or horizontally. not both.
  • 68. panorama controls scrollable panesSPACING ELEMENT x panorama panes should either scroll vertically or horizontally. not both.
  • 69. panorama controls floating buttonsSPACING ELEMENT x
  • 70. panorama controls controls not permitted ELEMENT SPACING x toggle switches x sliders x map controls x browser control x application bars are not permitted on panorama controls.
  • 71. dialog boxes placement delete delete are you sure to delete this record? are you sure to delete this record? yes no yes no x
  • 73. 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.
  • 74. 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 ok don¡¯t forget that users are human beings ;)
  • 75. typos
  • 76. typos x the app should not have any spelling mistakes. Copy that is spelt incorrectly looks bad and could negatively impact the brand perception.
  • 79. TY neelima salvi thank you! Design Consultant @amileens neelima.salvi@gmail.com