COAP:COAP-2100/week4-2011

Week 4 COAP 2100

Topics Covered

• HTML and CSS wrap up
  • Using the div tag for page layout (positioning) with the CSS class and ID selector
  • Discussion of some more properties (if questions)
  • Web page analysis with browser tools.
• CSS validation
• Colors schemes and palettes
  • RGB colors
  • HSV colors (shortly)
  • HSL colors
• Usability
• Wireframing
• Templating of web portals

Teaching materials

CSS

• CSS tutorial
• Learn CSS Positioning in Ten Steps
• Computer colors tutorial

Templating

• Web templating (will not be tested in exams)

Interface design and usability principles

• The Elements of User Experience (the complicated picture) by Jess James Garet
• Interface Design (part of Lynch and Norton's Web Style Guide)
• Usability testing on 10 cents a day by Steve Krug
• Top 10 best designed web sites by Scratch (this is just one of many lists, use it as an example if you like)
• The 5 Second Rule: Critiquing the Best Websites of 2009 – Part 1 (another example)

Prototyping and wireframing

• Paper Prototyping by Shwan Medero, A List Apart, 2007.

Software, Online tools and reference

Browser extensions (must have for web site analysis !)

• Web developer (Firefox)
• Colorzilla (Firefox)

Online CSS validator

• http://jigsaw.w3.org/css-validator/ (validate !)

CSS Reference

• http://www.quirksmode.org/css/contents.html (CSS compatibility tables)
• http://reference.sitepoint.com/css (SitePoint CSS reference, also available through the FF Code burner extension

Online tools and services

• http://blogger.com/ (for the templating demo, needs a Google account, get it from https://www.google.com/accounts/ if needed)
• http://colorschemedesigner.com/ (Excellent color palette design and testing tool)
• Web wireframe (A list of wireframe tools). We shall demo two simple specialize online systems: Mockingbird and Mockflow, as well as the general purpose diagramming tool:Creatly and Gliffy

Sharing colors palettes

• http://kuler.adobe.com/ or http://www.colourlovers.com/ (sites that lets users publish color palettes)
• http://blogger.com/ (you need a Google account)

PC Software (installed on the classroom computers)

• http://www.inkscape.org/ (SVG-based drawing program, freeware, easy to install). See next item for a template
• Illustrator (commercial)

Drawing templates

• Free Sketching & Wireframing Kit. Available in SVG (for Inkscape), PDF (for paper/pencil) and AI (Illustrator). You will have to unzip the files.

Classroom activities

Monday

• (Short) feedback homework 2
• HTML and CSS wrap-up, positioning (tutorial)
• Web page analysis with Web developer (Firefox extension)
• Colors (lecture), use of Colorzilla (Firefox)
• Creating a color palette. Demo of ColorScheme Designer

Wednesday

Homework feedback

General question one could ask about a web site (see homework 3)

• Where and under what conditions will the Web site be used?
• For what purpose will the site be used?
• Who will use the site (the target audience)?
• How will the site be used?

Basic web design usability principles

We shall briefly discuss the following general principles: efficiency, effectiveness and sastisfaction. These principles can be summarized as:

• easy to learn (task time)
• efficient to use (task time)
• effective to use (errors and task completion)
• provides quick recovery from errors (errors and task completion)
• easy to remember (task time)
• enjoyable to use (subjective user satisfaction)
• visually pleasing (subjective user satisfaction)

Usability.gov presents a similar list:

1. Ease of learning - How fast can a user who has never seen the user interface before learn it sufficiently well to accomplish basic tasks?
2. Efficiency of use - Once an experienced user has learned to use the system, how fast can he or she accomplish tasks?
3. Memorability - If a user has used the system before, can he or she remember enough to use it effectively the next time or does the user have to start over again learning everything?
4. Error frequency and severity - How often do users make errors while using the system, how serious are these errors, and how do users recover from these errors?
5. Subjective satisfaction - How much does the user like using the system?

Summary:

• Basically, usability testing means giving people tasks to do and observing them
• Only user experience (satisfaction and related) is measured with questionnaires

We will look at the Short (informal) usability test report template (DOC - 216KB) template from usability.gov:

Landing page optimization

The five second test according to Oli Gardner

1. What is it about?: How obvious is the core brand message?
2. Do I care?: Am I interested? Does it speak to me?
3. Is it trustworthy?: Does the design make me feel comfortable? Do they appear professional?
4. How do I participate?: What am I supposed to do first? Is the primary call to action presented in a clear manner?
5. Is it newsworthy?: Given today’s social web economy, how likely am I to want to share my experience? Is this facilitated in any way?

Web site layout navigation principles (Lynch and Horton)

• No dead-end pages
• Direct access
• Simplicity and consistency
• Design integrity and stability
• Feedback and dialog
• Bandwidth and interaction
• Interface design conventions (picture)

Wireframing - a first stage in proto-typing

• Drawing a sketch for a "multi-boxed" web page (e.g. a portal). Demo of Mockingbird and Mockflow
• Using a drawing tool such as Inkscape or a genral-purpose online drawing tool. Demo of Inkscape (free drawing tool), Gliffy and Creatly.
• Templating (very short introduction, this is more a self-study object for those who are able to dig into technical documentation and maybe some XML)

Midterm Q/A

• see week 5 program

Templating

• Short explanation of homework 4 - version A (an option for technical people)

Homework 4

Choose one (!)

• Homework A is technically difficult and rather meant for CS people
• Homework B is technically easy.

Due: Before Monday week 6 lesson (so you got 1 1/2 week for this)

Option A. Blogger templating

Task

• Modify a blogger template. To do so, you need a Google account (see week 1) and then dig into the documentation.
• Create a blog (if not already done so)
• Find a good template to start with. You also may search on the web. Many sites offer blogger templates for free (see below)
• To edit the template, select "Layout", then "Edit HTML". You then have the option to change just the CSS part or the whole layout (tick the expand widget template box).

Resources for Blogger templating - you may find more and better ones.

• Bloggerbuster (Amanda Fazani) has a long list of tutorials
• Can I edit the HTML of my blog's layout? (Official entry page to Blogger's Q/A about templating)
  • Page Element Tags
  • Fonts and Colors Tags
  • Widget Template Tags
  • Widget tags for layouts
• blogger template design (Don't know if this is still ok).

Tips

• Go first through some documentation at Google or elsewhere
• The use the web developer extension of Firefox to analyse a Design. Select CSS->View Style Information or hit CTRL-SHIFT-Y. Move your mouse until you see the "big rectangles". Click and you will see the ID or class attribute value in the web developer pane.

Minimal requirements

• Change the CSS properties of block and text elements
• Shortly list the changes you made in a blog post of the blog for which you made the changes
• Quote the references you used (and that includes blogger templates you may find on the web).

To get an A

• Either make really creative changes to the CSS part or create a template with a different layout. I do not require nor suggest that you build a template from scratch. You may reuse any existing solutions you like under the condition that you respect the licensing scheme and that you quote the source ...

Submission

• Submit the URL of your blog to the World Classroom. Do not forget to document shortly the changes you made with a blog post.

Note

• I will not test templating in the exams

Option B. Wireframing

Task

Create a two wireframes for a web site that you would like to build. I suggest that you focus on your term project and describe what you ideally would like to see, but keep in mind that you do not need to implement this in your final solution. You also can submit another project. However, in the latter, case you must explain in a few sentences its objective and for whom you are doing this.

Requirements

• Two drawings as explained above
• You can choose any tool out of the following list:
  • Pencil and paper (in this case you will have to take pictures and submit the two pictures)
  • A drawing tool such as Inkscape or Illustrator of OmniGraffle (Mac)
  • A digramming tool such as the free DIA or Viso (PC) or
  • An online diagramming tool (see the list)
  • An online wireframing tool (recommended option)
  • A stand-alone wireframing tool

Submission

• Upload two pictures in a general-purpose format, e.g. a bitmap (png, jpg), svg or PDF
• Avoid providing a URL for an online service (since access rights may not work). Most tools let you export pictures.
• Add a file with explanations if you create a wireframe for another project than your term project.

Due

Before Monday, week 6.