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).