3 main Rules of Usability
Web applications should explain themselves.
As far as humanly possible, when I look at a web page it should be self-evident. Obvious. Self-explanatory.
Don’t Make Me Think
As a rule, people don’t like to puzzle over how to do things. If people who build a site don’t care enough to make things obvious it can erode confidence in the site and its publishers.
Don’t waste my time
Much of our web use is motivated by the desire to save time. As a result, web users tend to act like sharks. They have to keep moving or they’ll die.
Progressive enhancement - 2003
Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection
CSS Zen Garden – 2003
Dave Shea - designer from Vancouver, Canada
http://www.csszengarden.com/
This project focused on the semantic HTML markup and external CSS stylesheet
visual presentation of a single HTML file, producing hundreds of different designs
Mobile first – 2010
Graceful degradation
Responsive Web Design
“We should take full advantage of new technologies, and craft every user’s experience so that it’s appropriate to the capabilities of the browser they’re using. That will likely mean that designs will look different — sometimes very different — across browsers.” Hardboiled Web Design, Andy Clarke, p.20
semantic HTML markup
markup rule - Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look.
usability rule - Identify and clearly articulate the primary goals of the website before beginning the design process.
Missing information
<H1>, <title> - Office of Innovation at UU (or Innovation Ulster Ltd ???)
<title>Office of Innovation homepage � University of Ulster | Universit</title>
<H2> - Business relevant and valuable expertise from academics right across the University. The Innovation Services team provides support for Ulster academics, students and graduates
<h2>Latest News</h2>
Description or <P> - Innovation Ulster Ltd is the legally constituted vehicle through which the University engages commercially with the business community and investors. Profits and surpluses from commercial activity are brought back into the University for distribution to the academic community and associated faculties and schools.
<meta name = "description" content = "Office of Innovation homepage � University of Ulster | University of Ulster Innovation Services" />
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<h1>,<h3> - missing, <h2>,<h4> - non relevant to the primary goals of the website!
Home Page issues
TopNavigation
Not relevantTo the goals
of the website
“Office ofInnovation” Button is the reduplicationof HOME page
Flash & Content
<p> Ulster Opens Up Research and Development Ideas Bank To NI Businesses</p> <p> Called <strong><a href="http://www.openulster.com">OpenUlste</a><a href="http://www.openulster.com">r</a></strong>, the project has been developed by the University’s Office of Innovation.</p><p>Office of Innovation. University of Ulster. Jordanstown Campus Newtownabbey BT37 0QB</p>
Foundation + Font Awesome
During the project I’ve used Foundation - The most advanced responsive front-end framework (grid system) in the world and Font Awesome - scalable vector iconsthat can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.