Ux design principles
•Als PPTX, PDF herunterladen•
0 gefällt mir•1,271 views
Guidelines for Home Page , Error Pages & Form validations
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Ux design principles
Ähnlich wie Ux design principles (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Ux design principles
- 1. © 2010 GrapeCity inc. UX Design Principles GrapeCity Inc July 9, 2013
- 2. © 2010 GrapeCity inc. Error Page 2
- 3. © 2010 GrapeCity inc. Ugly Error page 3
- 4. © 2010 GrapeCity inc. Bad Error page 4
- 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. © 2010 GrapeCity inc. Good Error page 6
- 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. © 2010 GrapeCity inc. Eventbrite Home Page 8
- 9. © 2010 GrapeCity inc. FreshBooks Home Page 9
- 10. © 2010 GrapeCity inc. Basecamp Home Page 10
- 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. © 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. © 2010 GrapeCity inc. Right time 13
- 14. © 2010 GrapeCity inc. Right Place 14
- 15. © 2010 GrapeCity inc. Right Place 15
- 16. © 2010 GrapeCity inc. Right Colour 16
- 17. © 2010 GrapeCity inc. Right Colour 17
- 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. © 2010 GrapeCity inc. Actions on multiple rows 19
- 20. © 2010 GrapeCity inc. Row actions 20 Hover Actions Menu Actions
- 21. © 2010 GrapeCity inc. Continuous scrolling 21
Hinweis der Redaktion
- It just says “404″ – will your average Joe web user know that 404 means you couldn’t find the page?It blames the visitor – “you typed in a bad URL”, “you were looking for something that doesn’t exist”, “you must have made a mistake”… you get the point.It doesn’t provide any options for fixing the problems – ok, great, an error happened, but what should I do now to fix it?For example, Google does nothing to help you find the page you were looking for
- The term “404 error” used to be pretty standard, but there’s no reason to use technical terms which might scare off your visitors. The title “Page not found” is more accurate and sounds less geeky.When designing your 404 page you want to keep the same basic structure as the rest of your site. When a user lands on a 404 page that looks completely different from the site they may wonder if they have left your site completely.Your 404 page should be kept basic so that you do not intimidate your user; the fact that your user has stumbled onto an error will be overwhelming enough for them. The main goal of your 404 page is to direct your user to the page they were looking for as quickly as possibleYour 404 page should offer a few key links and directions your user can choose between. One of the most important links to have is a “Home” link—a quick and friendly way to start over. Again, it is highly recommended to include a search bar in your 404 page. The 404 error has been shown to the visitor instead of the page they were looking for, so you should try to help them find the original page. Make sure your error page contains a menu, to allow the user to find the page they wanted. You could even include links to pages that you know have recently moved.If you get a high number of people seeing your 404 page (check your website’s analytics to find how many) you might have lots of broken links on your site. You could stop people seeing the error page altogether by just fixing these links. Website testing tools likeSiteBeam and Nibbler can check your entire website for broken links, enabling you to find and fix them quickly, without having to wait for someone to tell you.Some 404 error pages redirect immediately to the website home page. This is bad because it won’t be clear to your visitor that they’ve reached an incorrect page, and they might be confused about how they got to your home page.
- http://www.bluedaniel.com/404.shtml
- If you're a well-known brand or company (i.e. Coca Cola) you may be able to get away with not having to describe who you are and what you do; but the reality is, most businesses still need to answer these questions so that each visitor knows they are in the "right place." Steven Krugg sums it up best in his best-selling book, Don't Make Me Think. If visitors can't identify what it is you do within seconds, they won't stick aroundAll the homepages listed here are highly usable, meaning they are easy to navigate and there aren't "flashy" objects that get in the way of browsing, such as flash banners, animations, pop-ups, or overly-complicated and unnecessary elements. Many of them are also mobile-optimized, which is an incredibly important must-have in today's mobile world. Every homepage listed here effectively uses primary and secondary calls-to-action in order to direct visitors to the next logical step. Examples include "Free Trial," "Schedule a Demo," "Buy Now," or "Learn More." Remember, the goal of the homepage is to compel visitors to dig deeper into your website and move them further down the funnel. CTAs tell them what to do next so they don't get overwhelmed or lost. More importantly, CTA's turn your homepage into a sales or lead-generation engine, and not just brochure-wear.A homepage needs to be narrowly focused -- speaking to the right people in their language. The best homepages avoid "corporate gobbledygook," and eliminate the fluffA well-designed page is important to building trust, communicating value, and navigating visitors to the next step. As such, these homepages effectively use layout, CTA placement, whitespace, colors, fonts, and other supporting elements..
- The headline on their homepage, "If it's happening out there you'll find it here." is great, because it sparks curiousity.It then follows into the sub-head where visitors can either browse thousands of events, or choose to create an event.
- There's great use of color and positioning with the primary calls-to-action -- they jump right off the page!The copy used in the CTAs "Try it Free for 30 Days" is very compelling.The sub-headline is also great -- "Join over 5 million people using FreshBooks to made billing painless." It resonates with the audience because typically accounting software is "painfully complex" to freelancers and small businesses.
- For a long time, Basecamp has had brilliant homepages, and here you can see why. They feature awesome headlines and put their customers right at the center of their marketing.There is also a sign-up form directly on the homepage, to skip the step of going to another page
- form validation is the equivalent of having a conversation with a salesman right before a purchase – when everything is still on a knife’s edge. If the salesman is impolite andrefuses to provide any assistance, you’ll certainly leave the shop without completing your purchase. If the salesman is professional, polite and helpful – you’ll reach for your wallet.
- On the screen below you can see that I’m trying to register with an e-mail address that was already used. The form informs me that I should stop right at the second step and consider some back-up options, so I won’t be disappointed with the final result. A classic “after submit” validation would wait for me to fill in the whole form, reload the page and then it would let me know that something was wrong.Twitter chooses a better time to stop me – there’s no doubt about that. The immediate response of the form saves me a massive loss of time (yes, today even 3 minutes is a massive loss).And what’s even more amazing – Twitter is actually trying to have a conversation in this critical moment of our acquaintance. Thanks to inline validation, they can immediately offer me some options. Perhaps I’m the owner of the account registered with the e-mail and I just wanted to log in? Who knows – maybe I’ve just forgot the password?
- follow this rule of thumb – always place the message in the context of action. If you want to inform the user about an error occurring in a particular field – show it next to the field. If the error is general (e.g. a problem with sending data to the server) and there wasn’t a reload of the page – show the message next to the submit button, if there was a reload of the page – show it at the top of the page.
- the problem here is the “after submit validation” which makes people wait till the validation of the form is done on the server. However, in the case of such a short form, I wouldn’t expect it to be a critical design error.
- the problem here is the “after submit validation” which makes people wait till the validation of the form is done on the server. However, in the case of such a short form, I wouldn’t expect it to be a critical design error.
- the problem here is the “after submit validation” which makes people wait till the validation of the form is done on the server. However, in the case of such a short form, I wouldn’t expect it to be a critical design error.
- the problem here is the “after submit validation” which makes people wait till the validation of the form is done on the server. However, in the case of such a short form, I wouldn’t expect it to be a critical design error.
- the problem here is the “after submit validation” which makes people wait till the validation of the form is done on the server. However, in the case of such a short form, I wouldn’t expect it to be a critical design error.