Human-Computer Interaction & web design

User support system class discussion
“Write a manual page for making a cup of coffee.
Assume your user has no experience but will recognize a
cup, a kettle, a spoon, etc. Swap your manual with other
group. Does your partner’s manual give you sufficient
instruction to make the cup of coffee Discuss
improvements with your group and agree on a final
version of the manual.”

WEBSITE DESIGN GUIDELINES

Simplicity Website has to serve a specific purpose to the user (visitor, as users will visit a website to perform an action or multiple actions Do not use unnecessary elements Do not use too many colors – recommended use of 5 colors Typefaces should be clear enough to read – recommended use is 3 different typefaces with 3 different sizes Only use graphics when it is meaningful to users to perform a specific task. Don’t use graphics willy-nilly because you like them.

Visual Hierarchy Visual hierarchy entails arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first When it comes to optimizing for usability and UX, the goal is to lead visitors to complete a desired action, but in away that feels natural and enjoyable By adjusting the position, color, or size of certain elements, you can structure your site in such away that visitors will be drawn to those elements first.
you can see that the "Get Spotify Free" call-to-
action sits atop the visual hierarchy. For starters,
it's positioned on the left of the page (most
visitors scan websites from left to right. It's the
only element above the fold that uses that dark
purple color, which naturally draws your
attention.

Navigability Visitor should be able to arrive on the site and not have to think extensively about where they should click next -- moving from point A to point B should be as pain-free as possible Keep the structure of your navigation simple (and near the top of your page Include navigation in the footer of the site Use breadcrumbs on every page (except for the homepage) so people are aware of their navigation trail Include a search box near the top of your site so visitors can search by keywords Don't offer too many navigation options on a page Don't dig too deep. Inmost cases, it’s best to keep your navigation to no more than three levels deep. Include links within your page copy, and make it clear where those links lead to.
main (top) navigation will be, keep it
consistent. The labels and location of
the navigation should remain the same
on each and every page of the site.

Consistency Besides the site navigation consistent, the overall look and feel the site should be consistent across all of the pages.
■ Backgrounds, color, schemes, typefaces, and tone of the text in all areas should be consistent and it will have a positive impact on usability of user’s experience (UX).
■ Not necessarily all pages should have same layouts. Create different layouts for specific types of pages.
Airbnb uses the same layout for all of
it’s Help pages.

Accessibility In order to provide a truly great user experience, your site needs to be compatible with the different devices (and operating systems, and browsers) that your visitors are using Make it a responsive site using responsive design (contents are automatically resized and reshuffled to fit the dimension of whichever device visitors are using Add alt-text to all of your images (so visitors who can't see images in their browsers can still understand what's on the page).

Conventionality Having the main navigation beat the top (or left side) of a page Having a logo at the top left (or center) of a page Having that logo be clickable so it always brings a visitor back to the homepage Having links change color/appearance when you hover over them Take advantage of the fact that you already know what types of web experiences visitors are familiar with.
Popular conventions:

Download 1.72 Mb.

Share with your friends: