Please! Don’t Hurt The Web

Variety of sizes: 800×600 pixels 1024×768 pixels 1280×1024 pixels 1440×900 pixels 1680×1050 pixels

When online's news spread, HTML/XHTML is not a simply programming language for website presentation. It is content, this content bring data to users regardless of the disable or the enable and users transform it into information.

While client don't know web standards, web maker create web site without web standards respected.

• To benefit by table's attribute border=0, web developer layout web page using table is a easy to found mistake.

Figure: Layout using table

• Table turn into meanless tag. Layout this way is absolutely wrong according to HTML 4.01 specification. From HTML 4.01 specification:

"The HTML table model allows authors to arrange data... into rows and columns of cells."

• Reduce using efficiency. Tags are redundancy increase download time and current visual browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a table. Users are going to spend more time to see the news.

• Render in quirk mode and develop with buggy browser like IE(http://www.positioniseverything.net/explorer.html). This process create a web page invalid HTML/XHTML. Finally, web page with tags are meanless which is use for web page presentation. SEO(Search Engines Optimizing) Spider, browsers for the disable and web device are inaccessible.

Figure: BBC with quirk mode rendering

Please! Respect Open Standard

Web Standard development checklist
Check Points	Yes	No
Develop with firefox
Render in standard mode
Display as requirement on IE and Firefox
Pass Xhtml validation
Pass CSS validation
Html tags in semantic

UI & The Success

Supposing, the effort for developing an application is this ice. The look able ice is the effort for developing User Interface(UI). This effort is small, but UI is what users see, touch and feel. They assess level of application and application maker by UI.

UI is the key, it bring application and application maker to the success.

User & Task Design

Task Design doesn't Predict Users' Work Cause Usability Application

Pyramid Consulting company have an application name PMS. Staffs use this application for daily report to their manager what did they do each day.

It look interesting but exist mistakes. These mistake increase time to complete a task. This is cause there are usability troubles in this application.

In this article, I mention a usability mistake. I name it is “Duplicate Report”.

The web page they use to done:

Figure 1: Web page characters introduction.

• Some characteristic:
  • Calendar is control which allow user click and view the report of click date.
  • The date view is bold character.
  • The current date is bold and red color character.
  • Misreport date is black and normal character.
  • Report date is green color and normal character.
  • Approve date is report date(green color and normal character) with background color is yellow color.
• The task of this page:
  • Create new task.
  • Enter the time for each task user worked a day.

Report Date 16/10/2006

Figure 2: Web page of date 16/10/2006

I work a task 3 day from(13, 16, 17) so today is 16/10/2006 I create 1 task with name “PMS Usability Test”.

Report Date 13/10/2006

Figure 3: Web page of date 13/10/2006

I forgot report task “PMS Usability Test” for date 13/10/2006. So I make a report but the task I just create(date 16/10/2006) is not exist here. I recreate the same task.

Figure 4: Recreate task

Report Date 17/10/2006

Figure 5: Web page of date 17/10/2006

Next date(17/10/2006), I continuous incomplete task. But I found a little surprise about duplicate of task “PMS Usability Test”.

Below things are unusability

• I waste my time to create an exist task.
• Now, I confuse how to report a task which is duplicate.
• My manager is going to confuse too.
  • Why I report 2 task with same name?
  • Is it a little difference?
• Close a task 2 time.

In Conclusion

• The exist of UI:
  • User don't use UI:
    • With developer, this is waste time and money.
    • With user, this redundancy make them feel UI too busy and confuse.
  • UI is not exist, it lead to unmet user goals.
  • UI unpredictable what user will do with application it will not improve effect of application.
• UI designer:

  Anyone can create UI which allow user interact with main function of an application. But an application meet user goals it hardly. Usability is not a skill. It is an approach to representing users’ needs and developing a good product. It require UI designer must know the application goal, UI principles, usability guidelines and special understand user for successful product.

  With task design, UI designer predict users are going to use UI to do what? It is fundamental of useful application.

User & UI Design

Do you know, how user effect your design? Let me show you.

Here is 3 design of a print function from 3 web site.

Channel One(C1)

This is internal application, which is well know by Pyramid Consulting staff, is use for compose document.

• Application is support two print modes of current page:
  • Browser mode
  • Application mode
• User of this web site is Pyramid Consulting staff(there are no disable person). This is a web company, every people almost know the web quite well and they use this web application daily for compose documents, reports, reference... So, they are expert user.
• How user use this application to print current page:
  • In current view:

    User click Print Document link, which I mark as red color on the right, to print current page. The print result of browser command or the web page command is the same.
    

  • Print result(in preview):

    This page appear difference.
    

  But how a bout the difference of web page view and print result. Does it make user surprise?

  Yes, it was a nice surprise for the first time.

Is this design unusability?

• In our company, we are usually print document from this application, and we want to print content of this document, not web page layout.
• We will do it more quick than use browser command by switch to keyboard and type ctrl_p or select from menu.
• Print command from web page is also a signal for user that this page support print friendly mode.

VN Express

This is news web site, which is well know by Vietnamese people, is most popular international web site.

• Application is support two print modes of current page:
  • Browser mode
  • Application mode
• Since, this is a news web site. So, there are many kind of user. May be the disable, onshore, offshore, from novice to expert web users...etc.
• How is it design for all kind of user? And how user use this application to print current page?

  Web view

  • In current view:

    Here is web view
    
    

  • Print result(in preview):

    If user execute print command which support by browser, they will receive same result as they can see.
    
    

  Friendly view

  • In current view:

    If they like print this page as print friendly mode. They can use print command from web page. When the user click on print friendly signal of current page(I mark it as red color on the right)
    

  • Print result(in preview):

    This content appear on the new page new window. In this page support print content only.
    

Is this design unusability?

As you see, there are many kind of user of this web application. Its design must suitable for novice user and expert user.

• They use standard link for print friendly signal, lead user to another page which support print friendly.
• What they see is what they get. The print result same as they saw. It isn't make user surprise.

A list apart

This is web site, which is well know by web designer, is a favorite site of web developer.

• Application is support a print modes of current page:
  • Browser mode
• This page content is use for web designer. All of them is a expert user, they connect from anywhere on the world, but may be some of them are disable.
• In current view:

  There are no print friendly signal on current view.
  

• Print result(in preview):

  But if they print current page, they will receive difference result which they desire.
  

Is this design unusability?

• Since they are expert user. They know it support print friendly mode already. So, if they print current page, obviously they want to receive page content only. Use print friendly signal navigation to new page is not need.
• If there are print friendly signal by javascript to print current page it is not accessibility.

In conclusion

Through three example of same function, can you see:

• There are standards for usability, accessibility, platform... but there are no standard for design specific function of web application.
• Usability measurement of a web application base on user type of that application.
• You can plagiarize existence things from any application if you are building same type application.
• You must have clear goal of your application and understand who is its user? (build users profile).

PMS make users waste a lot of time

Daily, Pyramid staff must fill in timesheet, report to their manager what did they do each day. Every one do the same steps each day among of these steps are redundancy steps. But I think no body know how the current system waste their time.

• Now look at real situation:
  1. Enter PMS site url from address bar - flashpage is open.
  2. Click on link image and go to login page.
  3. Do login - Give login information and login had been successful homepage opening.
  4. From homepage we navigate to timesheet.asp. Finally, the page, which is “timesheet.asp”, we need opening.
• Imagination situation:
  1. If You enter PMS site url from address bar.
  2. the timesheet page open.

You will save lot of time and effort.

The tips for fill in timesheet:

You create the bookmarks for PMS site link to timesheet page. This step just skip flashPage.

Figure of FlashPage

Real Situation:

• Create bookmark link to timesheet.asp.
• Go to timesheet.asp by Click “timesheet.asp” bookmark from “bookmark toolbar”
• Enter username/password.
• From homepage I navitagion to timesheet.asp.

Imagination Situation - What can I change?

Task Design:

Task: Fill in timesheet

Goal/output:	Display the message that inform user the timesheet successful fill in. EX: “Today (date 11/11/1111) you work 8 hours. Now, you can take the rest.”
Inputs/assumptions:	User fill in timesheet from their computer. Exist a timesheet.asp bookmark. Assumption user just enter a task value 8 hours: ex: Code belgardirect: 8h Tesk belgardirect: 8h
Steps:	First time user fill in timesheet: Click bookmark enter username & password Select “remember me on this computer” Enter a task value 8 hours Hence: Click bookmark Enter a task value 8 hours
Instructions for user:	Open “timesheet.asp” bookmark from “bookmark toolbar”. Enter a task value 8 hours.
Notes:	Why we need this task? During 16 months work for Pyramid, the only task I work with PMS is fill in timesheet as daily report. Sometime, I work on a task a long time so I usually report “spent 8 hours a task”. Why we must redesign? I feel there are many redundance step for fill in timesheet. It is seemly normal but realy it is waste time.

Re-design:

First time:

1. Click bookmark of “timesheet.asp” from “bookmark toolbar”
2. Enter username/ passwork and select “Remember me on this computer” checkbox.
3. Open “timesheet.asp” (Open request page)

Hence:

1. Click bookmark from “bookmark toolbar”
2. Open “timesheet.asp” (Open request page)

What did I change?

	Current situation	Propose to change
	Click bookmark from “bookmark toolbar”	Click bookmark from “bookmark toolbar”
	Enter username/password
	Navigation to “timesheet.asp” from homepage
	Enter a task value 8 hours	Enter a task value 8 hours
Effort	I need nearly 3 minutesfor fill in timesheet	30 seconds
Effect		=>Save 2 minutes and 30 seconds person each day =>With 100 staff we save at least 6.25 months salary per year.

Is User Experience Changeable?

User learn how to use a software because of efficiently work.

User don't concern how software work. They want to complete their work with minimum effort or less time consuming. So the software must learn-ability, efficiency, memorability, error recover, and satisfaction.

In the first use, the software too strange it make use shock. They don't know how to use the software to complete their work. They start to learn and use that software. They do it step by step and have experience day by day. Hence, they use to do set of that steps to complete the same work without brain storm. They have experience in use the kind of software or type of platform which software run on cause design standards.

The latest version of a applications had release years still own a lot of problem because of 3 reasons.

1. HCI (Humman Computer Interaction) and Human Factor Interface don't grow enough.
2. Developer don't follow any design standards.
3. Developer don't understand user and user experience too.

Evidently example, on the Window Operation System user must Shut Down their computer they must click Start button.

Because user need complete there work with minimum time and minimum effort. So, the software is upgrade user willing study using software. Their experience is changed this way.

Navigation Design with Browser

When design a navigation system for web application, we must concern the navigation system is supported by browser.

• Link: Link is the chunk of text which is connect 2 document together with serveral appearance characters:
  • Underline.
  • Mouse over the text with the finger and link destination at Status Bar.
    • Mouse over
      
      
    • Link destination
      
• Link color is not clicked yet blue(Invisited) and clicked link color is violet(Visited). This feature help web user recognize which is visited and which is not visited.
  
• Go to the different web page or web site we can use the Location Bar.
  
• Add current page address into BookMark (for FireFox) or Favorites (for IE) for later visit.
  
  
• "Back " and "Forward
  are the way moving round a web page on the window.

• When move around more pages on the window use the down arrow button beside Back or Forward button .

  That button when click a list pop-up the visited page of current window (Back > current page > Forward).

• Click the down arrow button of Location Bar and select the entered address.
• Review visited page of previous session, web user use the History of browser.
• With FireFox, review the page have viewed in current session web user can select it from Go menu.