SlideShare ist ein Scribd-Unternehmen logo
1 von 7
Downloaden Sie, um offline zu lesen
10 do’s and don’ts of UI and UX design
light gray type of a white background). When you design a website or user interface, you want to let
the user control their browsing and movement through the site or application.
You can help them along by designing where they eyes should focus first, second, etc. Make the
important things such as screen titles, login forms, navigation items, or other important content a
focal point so visitors see it right away.
User experience online is very similar to the user experience you get when going to a grocery store.
You simply want what you came for (groceries) and be on your way.
Its been known that things such as auto-play videos, taking away a users ability to scroll, music or
sounds in the background, and opening links in new tabs/windows irritate users. Thats kind of the
whole point. DONT: Fill the screen with non-related content
Going back to the grocery store example, if Im looking for flour and sugar to bake with, I want to be
able to go directly to the baking aisle and find those specific things. If they are shopping for a t-shirt
on your sites store, they dont want to see ads or recommendations to buy a new phone.
9. DO: Provide a similar experience regardless of the device
Visitors are coming to your site using many different types of devices. However, when it comes to
our own designs and user interfaces and the creation of them, we may not be able to point out these
irritants ahead of time before users do.
Read Next:The ultimate guide to launching your UX career
If you start removing these items, it makes it hard for users to scan your content to find what they
are looking for. You want to be able to navigate the store quickly, get what you need right away,
head to the checkout line without a wait, and get back home.
Users of your site or interface feel the same way. The way they get there is by using your sites
navigation to quickly get to the content they are looking for.
Image credit: Shutterstock
With yoursite, keep in mind the impacts of your design choices on the sites loading time. With these
dos and donts, you can help your visitors out and provide a great user experience.
Stores understand this and have spent a considerable amount of time and money to help you
navigate the store easier, make sure items you want are in stock, and to provide fast and friendly
checkout lines.
Busy backgrounds cause a distraction and take attention away from the content, even more so if the
busy background is directly underneath the content. Design your navigation in a way that gets
visitors where they want to go with the least amount of clicks as possible while still being easy to
scan and locate where they need to go.
DO: Make the most important thing on the screen the focal point
Users are more likely to quickly scan the screen than they are to read everything there. You want a
pleasant timewithout any hassle. Therefore, if a visitor or user wants to find content or complete a
task, they are going to scan until they find where they need to go.
This post is the first in a series about UI and UX Design. In addition, be careful not to use color
schemes that decrease the contrast of the typography on the screen (i.e. Stay tuned for more posts
focused on improving user experiences for web and mobile.
When designing a website or mobile app, you want your UX to be as positive as possible you want
your users to enjoy being on your website and using your app. They want information that you are
providing on your site. Also, not having things pop up at users (i.e. A big part of user experience
design is ensuring that no matter how the visitor sees your site, they are getting the same
experience they would if they were to visit from another device.
4. DO: Provide instantly recognizable and easy-to-use navigation
The key to providing a pleasant user experience for users is to understand that they are in search of
content. I dont want to find grilling tools hanging from the shelving or disinfecting wipes on a stand
next to the flour.
When visitors are searching for content, they expect every link to take them where it says it will and
without a 404 error or to another place they werent expecting. modal boxes) and other things they
have to close out to read your content keeps the focus on the content.
Conclusion
Standing back to take an honest look at your sites user experience will help greatly reduce any
possible frustrations or aggravations users may experience while looking through your site or
application to find content or complete a task. Large images, lots of jQuery and animations, and
loading resources from third party sites hurt your sites load time. Using appropriate headings that
are easily seen, pictures to illustrate points, buttons for navigation, and blocks of content that are
unique or important help users scan the screen to find what they need.
8. Focus on the typography of your site to ensure issues such as line length, line height, kerning, and
font choice doesnt pose issues for readability.
7. This includes having busy backgrounds behind content or poor color schemes that hinder the sites
readability.
To help us designers step back and look at our designs and user interfaces from the eyes of the
visitor, lets run through some dos and donts to look out for so we can help them get exactly what
they came for without irritation or a bad experience.
1. Users of your website or application feel the exact same way when they click on a broken link or
on a visual element that looks like a button but isnt clickable.
For those of us who go to the store, its easy for us to pinpoint things that irritate us or think should
be improved. Provide a user-friendly navigation system that is easy to recognize and easy to use.
(also known as visual hierarchy). Our customers are visitors to the sites we create, and the groceries
are the content in which they came to the site for.. DONT: Hindering a visitors ability to scan the
screen
As I mentioned above, users and visitors alike often scan the screen quickly before settling in to read
any one particular thing with focus. Using visual hierarchy to design the users flow around the
screen reduces the competitive feeling of different elements.
You can help them out by limiting how many call-to-actions you have onthe screen, reducing or
relocating ads on the site, keeping flashing and animated things to a minimum, and use headings
appropriately. Its the strategies you use to create your UX, namely the UI, that can enhance it.
10. DONT: Make your visitors wait for your content to load
The attention spans and patience of Web users are very small, so when they have to wait on your site
to load, they will become frustrated and likely leave your site if it doesnt load fast enough for them.
This means that if a visitoris seeing your site on their phone, they should still be able to find
everything they need without trouble just like they would if they were viewing your site on their
desktop at home. They want the content they came for without any other interferences or
distractions. DONT: Have several things compete for attention
Much like not filling your site with unrelated content, designing elements that have to fight for
attention can also cause confusion and some nervousness in your users unnecessarily. Optimization
and key design decisions that reduce site loading time will help keep your visitors on your site.
We can fix this by taking a step back and look for these weak points in our design, so that we dont
cause them unnecessary frustration and keep them on our site so they can get to the content they
were looking for.
It may seem a bit corny to think of user experience design in terms of going to your local grocery
store, but the experiences are similar. underlined words that arent links, elements that have a call-
to-action but are not hyperlinked) can also frustrate users and can cause them to leave the site.
5. A seamless experience across all of your devices helps keep your users on your site regardless of
the device they are using.
2. DO: Ensure all linksand buttons function as they should
Its pretty frustrating to look for an item at the store you need for dinner, but its out of stock at the
grocery store. They can visit your site on their desktop or laptop, tablet, phone, music player, game
console, or even their watches. Visual elements that look like they are links or buttons, but arent
clickable (i.e. These elements should be used sparingly and only when appropriate and expected.
6: DONT: Letting the design of the site hinder the sites readability
The design of a site or user interface should never interfere with the users ability to consume the
content on the screen. Users often scan for visual cues such as headings, pictures, buttons, and
blocks to know where they should focus their attention.
You dont want to deal with a slow cashier, items not where they should be or out of stock, hostile
employees, or a crammed parking lot. DO: Let the user control their browsing experience
There are several common irritants that have appeared recently on websites that take control away
from users, such as auto-play videos and hijacked scrolling

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Migrants carte new jungle
Migrants carte new jungleMigrants carte new jungle
Migrants carte new jungle
 
2C2D 2015
2C2D 20152C2D 2015
2C2D 2015
 
Clasificacion segunda etapa damas #TourFemenino 2016
Clasificacion segunda etapa damas #TourFemenino 2016Clasificacion segunda etapa damas #TourFemenino 2016
Clasificacion segunda etapa damas #TourFemenino 2016
 
Tools for spending review in Japan and the use of key performance indicators ...
Tools for spending review in Japan and the use of key performance indicators ...Tools for spending review in Japan and the use of key performance indicators ...
Tools for spending review in Japan and the use of key performance indicators ...
 
8 Analisa IRR
8 Analisa  IRR8 Analisa  IRR
8 Analisa IRR
 
Cervicobraquialgia
CervicobraquialgiaCervicobraquialgia
Cervicobraquialgia
 
Distance education in Bachelor of Science - B.Sc UP,Noida@9278888356
Distance education in Bachelor of Science - B.Sc UP,Noida@9278888356Distance education in Bachelor of Science - B.Sc UP,Noida@9278888356
Distance education in Bachelor of Science - B.Sc UP,Noida@9278888356
 

10 do’s and don’ts of UI and UX design

  • 1. 10 do’s and don’ts of UI and UX design light gray type of a white background). When you design a website or user interface, you want to let the user control their browsing and movement through the site or application. You can help them along by designing where they eyes should focus first, second, etc. Make the important things such as screen titles, login forms, navigation items, or other important content a focal point so visitors see it right away. User experience online is very similar to the user experience you get when going to a grocery store. You simply want what you came for (groceries) and be on your way. Its been known that things such as auto-play videos, taking away a users ability to scroll, music or sounds in the background, and opening links in new tabs/windows irritate users. Thats kind of the whole point. DONT: Fill the screen with non-related content Going back to the grocery store example, if Im looking for flour and sugar to bake with, I want to be able to go directly to the baking aisle and find those specific things. If they are shopping for a t-shirt on your sites store, they dont want to see ads or recommendations to buy a new phone. 9. DO: Provide a similar experience regardless of the device Visitors are coming to your site using many different types of devices. However, when it comes to our own designs and user interfaces and the creation of them, we may not be able to point out these irritants ahead of time before users do.
  • 2. Read Next:The ultimate guide to launching your UX career If you start removing these items, it makes it hard for users to scan your content to find what they are looking for. You want to be able to navigate the store quickly, get what you need right away, head to the checkout line without a wait, and get back home. Users of your site or interface feel the same way. The way they get there is by using your sites navigation to quickly get to the content they are looking for. Image credit: Shutterstock With yoursite, keep in mind the impacts of your design choices on the sites loading time. With these dos and donts, you can help your visitors out and provide a great user experience.
  • 3. Stores understand this and have spent a considerable amount of time and money to help you navigate the store easier, make sure items you want are in stock, and to provide fast and friendly checkout lines. Busy backgrounds cause a distraction and take attention away from the content, even more so if the busy background is directly underneath the content. Design your navigation in a way that gets visitors where they want to go with the least amount of clicks as possible while still being easy to scan and locate where they need to go. DO: Make the most important thing on the screen the focal point Users are more likely to quickly scan the screen than they are to read everything there. You want a pleasant timewithout any hassle. Therefore, if a visitor or user wants to find content or complete a task, they are going to scan until they find where they need to go. This post is the first in a series about UI and UX Design. In addition, be careful not to use color schemes that decrease the contrast of the typography on the screen (i.e. Stay tuned for more posts
  • 4. focused on improving user experiences for web and mobile. When designing a website or mobile app, you want your UX to be as positive as possible you want your users to enjoy being on your website and using your app. They want information that you are providing on your site. Also, not having things pop up at users (i.e. A big part of user experience design is ensuring that no matter how the visitor sees your site, they are getting the same experience they would if they were to visit from another device. 4. DO: Provide instantly recognizable and easy-to-use navigation The key to providing a pleasant user experience for users is to understand that they are in search of content. I dont want to find grilling tools hanging from the shelving or disinfecting wipes on a stand next to the flour. When visitors are searching for content, they expect every link to take them where it says it will and without a 404 error or to another place they werent expecting. modal boxes) and other things they have to close out to read your content keeps the focus on the content. Conclusion Standing back to take an honest look at your sites user experience will help greatly reduce any possible frustrations or aggravations users may experience while looking through your site or application to find content or complete a task. Large images, lots of jQuery and animations, and loading resources from third party sites hurt your sites load time. Using appropriate headings that are easily seen, pictures to illustrate points, buttons for navigation, and blocks of content that are unique or important help users scan the screen to find what they need. 8. Focus on the typography of your site to ensure issues such as line length, line height, kerning, and font choice doesnt pose issues for readability. 7. This includes having busy backgrounds behind content or poor color schemes that hinder the sites readability.
  • 5. To help us designers step back and look at our designs and user interfaces from the eyes of the visitor, lets run through some dos and donts to look out for so we can help them get exactly what they came for without irritation or a bad experience. 1. Users of your website or application feel the exact same way when they click on a broken link or on a visual element that looks like a button but isnt clickable. For those of us who go to the store, its easy for us to pinpoint things that irritate us or think should be improved. Provide a user-friendly navigation system that is easy to recognize and easy to use. (also known as visual hierarchy). Our customers are visitors to the sites we create, and the groceries are the content in which they came to the site for.. DONT: Hindering a visitors ability to scan the screen As I mentioned above, users and visitors alike often scan the screen quickly before settling in to read any one particular thing with focus. Using visual hierarchy to design the users flow around the screen reduces the competitive feeling of different elements. You can help them out by limiting how many call-to-actions you have onthe screen, reducing or relocating ads on the site, keeping flashing and animated things to a minimum, and use headings appropriately. Its the strategies you use to create your UX, namely the UI, that can enhance it. 10. DONT: Make your visitors wait for your content to load
  • 6. The attention spans and patience of Web users are very small, so when they have to wait on your site to load, they will become frustrated and likely leave your site if it doesnt load fast enough for them. This means that if a visitoris seeing your site on their phone, they should still be able to find everything they need without trouble just like they would if they were viewing your site on their desktop at home. They want the content they came for without any other interferences or distractions. DONT: Have several things compete for attention Much like not filling your site with unrelated content, designing elements that have to fight for attention can also cause confusion and some nervousness in your users unnecessarily. Optimization and key design decisions that reduce site loading time will help keep your visitors on your site.
  • 7. We can fix this by taking a step back and look for these weak points in our design, so that we dont cause them unnecessary frustration and keep them on our site so they can get to the content they were looking for. It may seem a bit corny to think of user experience design in terms of going to your local grocery store, but the experiences are similar. underlined words that arent links, elements that have a call- to-action but are not hyperlinked) can also frustrate users and can cause them to leave the site. 5. A seamless experience across all of your devices helps keep your users on your site regardless of the device they are using. 2. DO: Ensure all linksand buttons function as they should Its pretty frustrating to look for an item at the store you need for dinner, but its out of stock at the grocery store. They can visit your site on their desktop or laptop, tablet, phone, music player, game console, or even their watches. Visual elements that look like they are links or buttons, but arent clickable (i.e. These elements should be used sparingly and only when appropriate and expected. 6: DONT: Letting the design of the site hinder the sites readability The design of a site or user interface should never interfere with the users ability to consume the content on the screen. Users often scan for visual cues such as headings, pictures, buttons, and blocks to know where they should focus their attention. You dont want to deal with a slow cashier, items not where they should be or out of stock, hostile employees, or a crammed parking lot. DO: Let the user control their browsing experience There are several common irritants that have appeared recently on websites that take control away from users, such as auto-play videos and hijacked scrolling