This document provides 10 tips for building great Windows 8 apps. It begins by introducing Dennis Vroegop and his background. The tips include focusing on a clear mission, using standard navigation patterns with at most 3 vertical levels, developing for mouse, keyboard and touch, making the app self-explanatory without needing help, providing visual cues and hints, using the charms bar instead of separate buttons, grouping items with menus, using the animations library instead of custom animations, leveraging Visual Studio templates while also customizing the design, and having fun in the development process.

2. Top 10 UX Tips
How to build great feeling Win8 apps

3. Who is this guy?
 Dennis Vroegop
 Freelance consultant
 Chairman dotNed
 Microsoft Most Valuable Professional Hardware Interaction Design
and Development (or.. Hi-Dad MVP)
 Developing since the early 1980’s

4. What?
.. Is UX, What is Win8, What are you on about?

5. Why?
… should I care?

6. How?
… do I get to be as great as you?

7. Focus!

8. Focus
 Mission statement
 Brainstorm the list of items
 Delete all items that do not fit mission statement
 Implement that list

9. Navigation Patterns

10. Navigation
 Vertical:
 Maximum of 3 levels deep
 Provide jumps over / to levels
 Horizontal
 Make a loooooong list of items, next to each other

11. Mouse, Keyboard, Touch!

12. Mouse, Keyboard, Touch
 Develop for all
 Test for all
 Focus on all

13. Self Explanatory!

14. Self explanatory
 User should know what to do
 No help required
 User feels “a natural using it”

15. Tips ‘n Tricks

16. Tips ‘n tricks
 Provide visual cues
 Especially focus on mouse users: they are lost easily
 Hints during inactivity

17. Use Charms!

18. Use Charms
 Don’t do a “search” button
 Don’t do a “share” button
 Don’t do a “print” button
 Use the systems available: use charms!

19. Use Menus!

20. Use menus
 Group things
 Selected item specific: to the left
 App specific items: to the right
 The only place where you’re allowed to use lines as spacers

21. Use Animations Library!

22. Use animation library
 Animation is functional
 Don’t reinvent the wheel
 Animations are available as resources in the SDK
 And… don’t reinvent the <blink/> tag…

23. Use VS Templates!

24. Use VS Templates
 Several templates available
 Grid
 Master details
 Blank
 Full functional apps

25. Don’t use VS Templates!

26. Don’t use VS templates
 (well, use them but disguise them)
 Make your app stand out!
 Use what works, delete what doesn’t
 Create unique artwork
 Create icons / logo’s
 Create color schemes

27. “Good artist create, great artists..”

28. To summarize…
 10 Focus  5 Use Charms
 9 Navigation Patterns  4 Use Menus
 8 Mouse, Keyboard, Touch  3 Animation Library
 7 Self-explanatory  2 VS Templates
 6 Tips ‘n Tricks  1 No VS Templates

29. One last thought
… Columbo style

30. Have fun doing it!
(otherwise you might as well give up!)

31. Q&A and Thank you!
 Reach me at
 dennis@vroegop.org
 Twitter: @dvroegop
 http://blogs.vroegop.org
 And of course: http://www.dotned.nl