1. Principles of effective web design NOTES Flo Morris-Duffin

2. Website need to be user friendly and easy to use Substance over style Features that make a website useable – Easy to navigate around – Good text placement/content – Good search system – Thought out site structure – Consistent style throughout website Bad usability features – Hidden log in link – Pop ups for features of the website (most browsers have inbuilt pop up blockers,a nd it is fiddly and time consuming to unblock pop ups, most users wouldn’t bother) – Hidden links (e.g. on an image or a button that is not obvious) EVEN WORSE – test that is underlined or bold to look like links, but aren’t. e,g blue, underlined font looks like a link. – Website that make you enter details before you continue (this wastes users time and puts them off using the website, stick to just asking for name and email if you must, as most people can enter that in less than 1 minute) – Covering content with other content (e.g. toolbars and adverts) AKA bad layering – Too much going on AKA ‘Visual Noise’ – Some drop down menus- save space, but take concentration to click the correct link (which can be annoying especially if using a touch screen device) – Blinking images adverts – distracting from the info on the page – Links that open in a new window – all browsers use tabs, and most people don’t want to lose the page they are on Implementation details- e.g where a search bar is placed also effect how good a website is

3. Users attention Users don’t read, they scan The human eye is not linear – Don’t use just linear text, especially that involves a lot of scrolling. Users look for features such as: – Hyperlinks – Pictures – Bullet points – Text that stands out to them – Prices – Symbols (e.g. number of stars a product have received) It is good to add simple, basic text – This also builds up the users trust with the website – There are not lots of links and adverts the user could click on, which may mean they spend more time on the site. Stick to a used structure (e.g. toolbar at top, or on left side of page) Use well known terms like “Sign Up” not “Learn more about our services”, as it will make the user trust the website – Don’t try and trick the user into giving info or signing up for something – Honesty is key, especially if money is involved, – This builds trust

4. Things to remember when creating a website Test often – Find errors and bad parts of the website that the creator may not notice Fix and then test again – You may find errors that you did not notice during the first round of testing Keep updating and editing – Keep the website dynamic and up to date – Errors may have been created after you first launched the website Don’t be afraid of ‘white space’ – Allows the users to think, and take in info better – Makes websites look more professional – Gives balance to the page Strive for simplicity not complexity Keep design features conventional – E.g. if you changed the website language into Japanse, would you be able to find out how to search, log in and log out? – Good layout and drawing attention to some buttons (such as log in) make this easier

5. Guide the users eye using the following tools: – Position – Colour – Contrast – Size – Design elements Good navigation features Breadcrumb trails – Allows users to keep track of where they are within a system – E.g. Homepage > How to make a website > Headings > Sub headings The effect on the website when the page is resized. – Repeating background layers – Especially when using CSS Things to remember when creating a website

6. Font size – Large enough to read – In proportion to headings and subheadings Font type Spacing – Between lines and letters Line length – Small columns of text work best (think of Newspapers) Colour – High contrast text – E.g. not light grey and white background, but dark grey or black with a white background Paragraphing Things to remember when creating a website FONTS

7. Sources http://uxdesign.smashingmagazine.com/2007/09/27/10-usability- nightmares-you-should-be-aware-of/ http://uxdesign.smashingmagazine.com/2007/09/27/10-usability- nightmares-you-should-be-aware-of/ http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of- effective-web-design/ http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of- effective-web-design/ http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential- principles-for-good-web-design/ http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential- principles-for-good-web-design/ http://en.wikipedia.org/wiki/Breadcrumb_%28navigation%29