User Experience for Web Design

  1. What Makes a Good Web User Experience?

    • Building a site for your users: When making a site for your users, it is best to think about what they will be wanting to look for on your site, then implement that into it. Focusing on one person's persona is also a good way to get a site that benefits everyone, because it is surprising how many people might have similar interests.
    • Understanding how people browse the web: People use the internet for information and not really for entertainment.
    • It's all about information: When making your site, try to make all the informationin your site as easy to find and clear as possible so that users' don't get lost trying to find what they need.
    • What causes people to leave sites: Things that can make people leave are: anything that prevents the user from finding what they need, using jargon, using complex words over normal
  2. Don't Get in the Way of the Information

    • Simple design: All of the elements on the page should make sense and help tell the story on your page, if not then they should probably not be there.
    • Consistent design: Having the same thing happen on all of your sites will make it easier for users to navigate your site and will keep them longer. If the site has differences in the way things behave, then people will leave and find another site.
    • Standard design: When making a standard design site, it doesn't mean make it look boring or the exact same as other sites, just make so that users can access it easily because they will have seen the same structure before.
  3. Site Layout

    • People can begin from any page on your site: People access your site differently, and because of that, people could pop up in a random page in your site, so you should make it easy to see what is going on in all of your pages.
    • Elements every webpage should have: Here is a couple of things that every page on your site should have: once you figure out what it is your site is about, implement it in all of your pages. A page title is also needed to help the user and browser understand what the site is.
    • Creating progressive navigation: To assist in navigation, make a category page which is a little like a search results page but with the links in your navigation bar instead of different sites.
    • Arranging your content: If you have a lot of content, there are a few options to arrange it: leave it all on one page with scrolling, split up the content to multiple pages if need to, or sequential order.
  4. Writing for the Web

    • How people read on the web: People scan not read, and they mostly scan from the top left of the page to the bottom. Their eyes are also drawn to links, headings and highlighted stuff. Higher literacy people tend to skip the big words just enough to get the main idea, while lower literacy people have to read every single word in order to understand it.
    • Writing for information exchange: People who read online usually are for information not entertainment, so you should make the text easy to read and simple, as in not many long sentences or big words.
    • Formatting pages for information exchange: Headlines are the best form of formatting because they can be used to draw the users to them and get them to read them. It also is a good idea to not use more than three levels of headings. Since people scan rather than read the text, make the first paragraph a summary of the information that you are presenting.
  5. Homepage

    • Using your homepage as a site summary: Your homepage is like your introduction page to your site so you should keep it as up to date as the rest of your site. It can also help orient users to where they need to go, and it can provide links to top tasks on your site.
    • Creating fresh content: You should keep your site as updated as possible but if there isn't really anything that needs tobe updated, then you can add new things to your site that you could use.
    • Displaying navigation and search: Your homepage should 100% include the navigation bar as much as any other page, and there should also be a search bar that people could use. A good place to put the search bar is in the top-right corner of the page.
    • The five-second test: The five-second test is a test where you look at a site and after five seconds you can decipher what the site is about and wether you want to continue or leave. You can also use these sites to help you out: Five Second Test, ZURB - Clue.
  6. Category and Landing Pages

    • Showing people what you've got: Category pages can hold the most recent, liked, or even viewed items in their own page, with a short description of each.
    • Making comparisons easy: Allow the users to be able to compare items on your site, and possibly on others sites too. Whenever you are writing your category pages, write with comparison in mind
    • Creating landing pages from ad campaigns: Landing pages are for search results and can be made from ad campaigns.
  7. Detail and Product Pages

    • The real purpose of detail and product pages: Detail pages are the pages that give the readers the details about a particular event, while the product page shows details about a particular item. Detail pages should describe the topic factually. Product pages should have a price, and a call to action, such as Buy Now.
    • Writing descriptive text: When writing on the web, people will be looking for information, and when they find your site the text should be able to give them exactly what they are looking for, which means put facts and examples down and not opinions
    • Using images to set context: If you are describing a product like a car, then include a lot of high-quality photos to get users as close as they can be without them being able to touch it, in case they don't live close enough to view it themselves..
    • Showing the price for products: If you have any ecommerce sites than make sure that you show the price that goes with the product otherwise people will not go back to your site for the fact that they can't buy whatever it is you're selling because they can't see the price.
    • Have a call to action: If you want your users to do something on a certain page, make it clear to them.
    • About Us: A special detail page: The About Us page is a page that shows the user about what the company does or talks about how they originated or whatever else they put on it. It also can be the key to trusting a certian site or not trusting it.
  8. Forms

    • Ask for information in context: When making forms make sure that the experience is as painless as possible because not many people like doing forms. To have the user give you their information, you need to get them to understand why they are giving you information. Make sure to ask the right questions at the right time.
    • Making forms as painless as possible: If you make a big giant form, then people will most likely not want to fill it out, and if they aren't ready to share, then they will probably fill it out with false information. The best way is to make the forms as short as possible and to ask certain questions when it is time.
    • Creating form fields: When creating a form field make sure that to signify what is required has an asterisk (*) or something to help identify it. Also limit the number of options when adding a dropdown or radio buttons/check boxes. And NEVER put a reset button on any of your forms. And instead of using submit for the submit button, use a different word or two or three words to describe what will happen.
    • Handling errors gracefully: To catch errors in your forms, have code that can help with identifying what kinds of text should be typed and what will cause an error. When identifying which boxes have an error, use the color red and have a message that says what is missing or incorrect.
  9. Using Media to Help Tell Your Story

    • Using different types of media: There are different types of media and they can help tell the story of your site, but if they can't help then you should remove them so that they don't create a cluster of unused items. Using a bunch of different types of media on your site will make your site slow down a bunch and we don't need too many thing taking up all of our page load time.
    • Simple question: Does it enhance the experience?: If the image or video you put down on your site doesn't seem to add up to what you are selling on your site, then you should not add it, because it would slow your sites loading time.
    • Using graphics for explanation, not decoration: Adding graphics that can help with promoting your site is great but don't add too many, or ones that don't promote your site, because otherwise you will get a untrustworthy site.
    • What is interactive content?: Interactive content is content that users can interact with by clicking, scrolling, and many other things that users interact with the computer. Lets say you click on a image that changes to another image. You can also drag objects to another area
    • Laying out your page for media: If you have media that you feel your users will listen to, then you can add that, and/or you can add a download option for that media. If you do a download option then you should have a seperate page specifically for the downloadinng that shows all the different formats it can come in.
  10. Balancing Adverts and Content

    • Making money without selling out: A low-end site's income mostly comes from ads, while a high-end site's income comes from sales. Another way to to make money without possibly selling out of whatever it is you are selling, is to have valuable content that is targeted, concise, timely, and up to date.
    • Adding graphical ads: Graphical ads on most sites end up getting ignored because people's brains don't end up seeing them as ads. And because of that, the people who make the ads have to work harder in order to get users to notice the ads by having them flash through multiple colors and anything else they can think of, but the major thing that affects the overall ad is, does it go to where it says it is going to go..
    • Creating text ads: A text ad is different from a graphical ad by the fact that it is text-based. It should be a different color and possibly size too. When making a text ad, make sure that it doesn't look anything like, and is seperate from normal text.
  11. Summary: Good Design Practice

    • Simple, consistent, and standard design: Keeping things simple, consistent, and standard will help users understand where your site is going and if it is relevant for them.
    • Considering your users: When creating any site make sure to ask the question "Does this help my users?