Publishing on the World Wide Web CHAPTER 3

Publishing on the World Wide Web CHAPTER 3 – WEB DESIGN GUIDELINES

Introduction This chapter will focus on the web design guidelines that helps user experiences in browsing the web. The chapter will cover the web appearances and interactivity. The chapter will also look into the common web design mistakes.

1. Appearance The web design appearance will look into the visual or the look of the website created � Web site design appearance can be divided into 6 (SIX) categories: 1. Metaphor 2. Content 3. Consistency 4. Page Length 5. Balance Layout 6. Proximity �

Appearance : metaphor 1. 1 Metaphor is typically an unconscious part of our daily existence. Metaphors refer to an experience, location, object or tools using familiar items. metaphors link a familiar concept with one that is unfamiliar.

Appearance : metaphor Take, for example, these icons. The store uses a shopping bag. You. Tube resembles a “play” button. Gmail looks like an envelope, and Sticky Notes looks like a real pad of sticky notes.

Appearance : metaphor Metaphor on web � On the Web, we can make use of metaphors in different ways. In general, metaphors are a great tool to increase the user experience of your website. � Metaphors that are used consciously can help your users understand abstract content, create a sense of familiarity, trigger emotions, draw attention, or motivate action. � Metaphors on the Web can represent a whole website, or single elements on your site. They can be either interaction or content metaphors and they can be both visual and verbal.

Appearance : metaphor Metaphor on web One popular metaphor on websites is tabbed browsing. Different web pages are structured in a way that reminds us of traditional register cards. For example ”CNN” and “The Times” make use of this metaphor.

Appearance : metaphor Metaphor on web The file sharing tool ”dropbox” makes use of a metaphor to help us understand their services. In their name and logo they simply refer to a dropbox, a box that you can drop things into. Dropbox has adapted this concept and transferred it to an online tool that stores documents.

Appearance : metaphor Metaphor on web Icons are other frequently used examples of metaphors on the Web that help us understand unfamiliar concepts. There are icons for many things, like shopping baskets, home buttons, printers, and many more. For example ”amazon” makes use of a shopping basket that even shows the number of collected items.

Appearance : content Writing for the web are not the same as printed version. When writing for web developer need to apply different skills and techniques to attract and retain your readers, get your message across effectively and achieve their objectives.

Appearance : content A successful website presents information required by users in a way that can be read and understood quickly and easily. People don’t read a website, Instead, they: • skim, scan, and select • browse before foraging • take quick glances and occasional very brief stops • grab what they need and get on towards the goal

Appearance : content Three rules when preparing documents for the web � Be succinct ( writing in simple english). � Write in a way that helps the reader quickly scan or skim read the contents. � Split large documents into separate files

Appearance : content Shuteye uses three simple short questions at the top of its home page to help identify visitors who could benefit from its offerings The communication at the top of the page is brief but highly effective for filtering potential customers.

Appearance : content

Appearance : consistency A well designed website is consistent from page to page. By definition consistency means agreement or logical coherence among things or parts.

Appearance : consistency � When designing a website, there a few things to keep in mind in order to create consistency: 1. 2. 3. 4. 5. 6. 7. Colour scheme Style Borders Type and fonts Size Background images Effects

Appearance : consistency Home page Sub page

Appearance : consistency

Appearance : consistency Fonts Elements

Appearance : consistency Different devices

Appearance : consistency

Appearance : Page length Determining the proper length for any web page is a balance of four factors: The relation between page and screen size The content of your documents Whether the reader is expected to browse the content online or to print or download the documents for later reading The bandwidth available to your audience

Appearance : Page length Long web pages require the user to remember too much information that scrolls off the screen; users easily lose their sense of context when the navigational buttons or major links are not visible � But long web pages have their advantages, they are often easier for creators to organise and for users to download. � Long pages are particularly useful for providing information that you don’t expect users to read online. �

Appearance : Page length Long scrolling page

Appearance : Page length � If you wish to provide both a good online interface for a long document and easy printing or saving of its content: �Divide the document into chunks of no more than one to two printed pages’ worth of information �Provide a link to a separate file that contains the full-length text combined as one page designed so the reader can print or save all the related information in one step. . �Make long pages friendlier by positioning “jump to top buttons” at regular intervals down the page.

Appearance : Page length � shorter web pages suitable for: �Home pages and menu or navigation pages elsewhere in your site �Documents to be browsed and read online �Pages with very large graphics � Longer documents suitable for: �Easier to maintain (content is in one piece, not in linked chunks spread across many pages) �More like the structure of their paper counterparts (not chopped up) �Easier for users to download and print

Appearance : Page length Sample or web with shorter length

Appearance : Balance layout When creating a website layout, a lack of balance can seriously have negative impact on the user-experience. The balance layout will result in effectively communicating information to the readers.

Appearance : Balance layout The three main principles of composition to be consider when balancing a webpage are : Focal point Unity Contrast

Appearance : Balance layout � Focal point: �On a webpage this would be the center of interest or focal point. �It should be the dominant area on any website document or webpage. �Here is where your main subject or argument should be presented. �Example : Every page on your website should have an eye catching central theme

Appearance : Balance layout

Appearance : Balance layout Sample focal point

Appearance : Balance layout � Unity: �Unity is the tying together of all the elements of a webpage, during webpage construction, into a framework which supports your main theme. �Specifically though, we can look at one definition that applies to this scenario as of the golden rules of good web design: "the state of forming a complete and pleasing whole". �Example : Provide unity by creating an overall look and feel for your website.

Appearance : Balance layout Unity in alignment

Appearance : Balance layout Unity in colour

Appearance : Balance layout Contrast: The visual impact of a webpage can be enhanced by the use of contrast. White space, colours and graphics are tools that can be used to create contrast. On the internet it is imperative that the content of a webpage should stand out clearly to the eye. Example : How to use white space for contrast on your web pages.

Appearance : Balance layout

Appearance : Balance layout White space used

Appearance : Balance layout

Appearance : Balance layout Contrast with image

Appearance : Proximity This has to do with grouping like elements together and separating those that are not. It can really ruin user experience if you group everything into one lump text block. That’s why its very important to use header tags and proper spacing.

Appearance : Proximity This site does a beautiful job of organising it’s content into three major categories. They are well spaced and clearly defined.

Appearance : Proximity This site is well structured. The headers are clear and concise. The spacing is good and the content is separated into logical chunks.

2. Interactivity An interactive website is an Internet page that uses various software to create an interactive experience that allows the person viewing the webpage to be actively engaged with the site. � Adding interactivity to a web site attracts user attention and tends to brings them to the website again. � This is because the site add a good amount of visual interest and attract users to visit your site again and again. � The main idea of a website is to convey a message effectively. �

2. Interactivity When designing a web with interactivity, there are several features that developer need to consider which are : GUI Quick to load Link effectively Sense of context Provide choices and escape Opportunity for feedbacks

Interactivity : GUI What is GUI? A program interface that takes advantage of the computer's graphics capabilities to make the program easier to use. Well-designed graphical user interfaces can free the user from learning complex command languages.

Interactivity : GUI What is GUI? GUIs typically work with pull-down menus, dialog boxes, check boxes radio buttons, dropdown list boxes, scroll bars, scroll boxes, and etc. Programs with a GUI require a computer with sufficient speed, power, and memory to display high-resolution, bit-mapped display. (source : tech about)

Interactivity : GUI and web design The similarities between GUI and Web Interface Design both are : ○ software designs ○ Interactive ○ heavily visual experiences presented through the screens (source : nielsan normann group)

Interactivity : GUI and web design The difference between GUI and web interface design : Differences GUI Web Device diversity the characteristics of the interface devices such as monitors and modem are well defined and screens appear exactly as specified. user devices may range from handheld mechanism to the high end work stations The User Controls Navigation users navigate through structured menus, lists, trees, dialogs and wizards Users navigate through links, bookmarks and typed URLS. Source : nielsen normann group

Interactivity : GUI design

Interactivity : GUI Web interface with GUI in different devices

Interactivity : GUI Previously the web design are normally are minimal visually. Nowadays, due to the increasing technology on internet and bandwidth speed the web design are in need of the GUI design for better user experience.

Interactivity : Quick to load When designing a web, developer have to ensure that the web is fast loading. The biggest problem with a slow-loading website is the poor experience it creates for the end user. People are becoming increasingly impatient when browsing the internet. Some visitors may wait it out, but others will click the back button in their browser and browse elsewhere.

Interactivity : Quick to load You can try website speed test “http: //tools. pingdom. com”

Interactivity : Link effectively Links are used in digital text to reroute readers to other locations. Links are typically blue, underlined text but can be text in other formats, buttons, images, and other options. Check that a link works when you initially use it.

Interactivity : Link effectively

Interactivity : Link effectively Website link building in this case refers to links from other websites that point to your website. These are called inpointing links or back links. The more back links that point to your website, the more importance the search engines will give to your information, and the higher you will rank in the search results.

Interactivity : Sense of context were also known as Responsive Web Design. Responsive Web design is the approach that suggests the design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Interactivity : Sense of context As the user switches from their laptop to i. Pad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Interactivity : Sense of context To achieve this types of interactivity (Sense of Context), students should acquires the high knowledge on creating liquid and elastic layouts with CSS.

Interactivity : Sense of context

Interactivity : Provide choices and escapes Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Supports choices, undo and redo and a clear way to navigate.

Interactivity : Provide choices and escapes Search is easy to open, enter info, execute or cancel.

Interactivity : Provide choices and escapes

Interactivity : Opportunity for feedback The interface should at all times speak to the user. When user actions are both right and wrong or misunderstood, always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.

Interactivity : Opportunity for feedback

2. Interactivity Sample web : Infinite colours

2. Interactivity Sample web : Square circle

Common web design mistakes When designing a web, developer sometimes tend to make several mistakes There are various mistakes could be found. Listed in this chapter are some of the common mistakes web developer did

Common web design mistakes are : Lack of Consistency Outdated Content Dead Links Poor Legibility and Readability Music Neglecting Mobile Users Forgetting the Contact Page Poor colour scheme

Common web design mistakes � Top 10 Common web design mistakes by Jakob Nielsen (HCI guru)are : �Bad Search �PDF file for online reading �Not changing the colour of visited link �Non scannable text �Fixed font size �Page Titles With Low Search Engine Visibility �Anything That Looks Like an Advertisement �Violating Design Conventions �Opening New Browser Windows �Not Answering Users' Questions