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. designing
for
windows
phone
by Neelima Salvi

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

3. metro
language

5. © microsoft

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?

10. user
experience

11. 1

12. 2

13. 3

14. 4

15. 5

16. 6

17. is this a
window

18. visual
design

19. What if you do not target the red marked area?

20. achieving
goal

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

26. theming

27. theming

28. start tile

29. start tile
x

30. splash
screen

31. splash screen
x

33. segoe WP

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.

36. Visual
language

37. visual language
metro
icons

38. visual language
foreground or background color of a control

39. visual language
x

40. 1
simple color
2
dimensional

41. composition

42. element alignment
element spacing

43. element alignment
A B

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

53. don’t
break the
GRID

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

60. there is no
selected state

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

72. language & tone

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.

77. page
transitions

78. page transitions

79. TY
neelima salvi
thank you! Design Consultant
@amileens neelima.salvi@gmail.com