Usability through the Semantic HTML Markup method

A Common Sense Approach to Web Usability

Don't Make Me Think

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

The power of CSS

One HTML file different ways to present the same information

Hardboiled Web Design – 2010

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&rsquo;s Office of Innovation.</p><p>Office of Innovation. University of Ulster. Jordanstown Campus Newtownabbey BT37 0QB</p>

Alt = accessibility

Alt= “contact us”

Alt= “Office of Innovation. University of Ulster Logos”

Home page Redesigned

+RESPONSIVE+INTUITIVE+CLICKABLE+INFORMATIVE+CLEAR NAVIGATIONHIERARCHY+NO FLASH

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.

UU corporate identity

+WEB – 120px+Left top corner+Space around