Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ux design principles

1,212 views

Published on

Guidelines for Home Page , Error Pages & Form validations

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Ux design principles

  1. 1. © 2010 GrapeCity inc. UX Design Principles GrapeCity Inc July 9, 2013
  2. 2. © 2010 GrapeCity inc. Error Page 2
  3. 3. © 2010 GrapeCity inc. Ugly Error page 3
  4. 4. © 2010 GrapeCity inc. Bad Error page 4
  5. 5. © 2010 GrapeCity inc. Tips to Make Your 404 Page More Usable •There’s no need to get technical •Keep it familiar •Offer some direction •Help the visitor find what they were looking for •Easily allow visitors to send you a message •Fix your broken links •Don’t redirect to the home page 5
  6. 6. © 2010 GrapeCity inc. Good Error page 6
  7. 7. © 2010 GrapeCity inc. Elements of a Brilliant Homepage Design •Clearly answers "Who I am," "What I do," and/or "What can you (the visitor) do here." •Usability and mobility •Calls-to-action (CTAs). •Resonates with the target audience •Great overall design 7
  8. 8. © 2010 GrapeCity inc. Eventbrite Home Page 8
  9. 9. © 2010 GrapeCity inc. FreshBooks Home Page 9
  10. 10. © 2010 GrapeCity inc. Basecamp Home Page 10
  11. 11. © 2010 GrapeCity inc. Importance of Form Validation • Typically encounter form validation – Sign-up/sign-in forms – Shopping cart – check-out forms – Newsletter forms • Form validation is the equivalent of having a conversation with a salesman right before a purchase • Forms with error messages such as “Database error!”, “Wrong e-mail!” not only fail in terms of savoir-vivre – they usually result in a high drop-out rate. 11
  12. 12. © 2010 GrapeCity inc. Important Elements -Form Validation • Right time of informing about problems/success • Right place for validation messages • Right colour • Clear language 12
  13. 13. © 2010 GrapeCity inc. Right time 13
  14. 14. © 2010 GrapeCity inc. Right Place 14
  15. 15. © 2010 GrapeCity inc. Right Place 15
  16. 16. © 2010 GrapeCity inc. Right Colour 16
  17. 17. © 2010 GrapeCity inc. Right Colour 17
  18. 18. © 2010 GrapeCity inc. Right Language - Rules 18 • What happened • What’s the next step the user should take to succeed (this doesn’t necessarily apply to the confirmation of success messages) • Should always avoid using technical jargon.
  19. 19. © 2010 GrapeCity inc. Actions on multiple rows 19
  20. 20. © 2010 GrapeCity inc. Row actions 20 Hover Actions Menu Actions
  21. 21. © 2010 GrapeCity inc. Continuous scrolling 21

×