Section 6 HCI & the Web 02/01/2013 1
Web Site Planning Main questions to address when planning a web site: What do I want the site to accomplish, sell, or promote? Who are my users and what do they want and need? What competitive advantage will the site offer over others? How can the web medium be taken advantage of? What should I consider when creating the project schedule?
The Web Development Process Differs depending on the setting Corporate web team on-going process, continually striving to improve the service provided Daily web publication process is a very focused daily event Free lance consultant development process has a discrete beginning and ending Regardless of perspective there is a more or less common vision of a web development process
Web Development Process Phase 1: Information Gathering Phase 6: Maintenance & Growth Phase 5: Launch The Development Cycle Phase 2: Strategy Phase 3: Prototyping Phase 4: Implementation
User Analysis 1. Define your purpose What you want your web site to accomplish Your statement of purpose will guide you through defining your strategy and creating the content of your site 2. Define your target audience Remember you site may not appeal to everyone Best bet is to choose a particular segment of the audience and focus your efforts on attracting and engaging them
User Analysis 3. Gain input from potential users on the content or your site Ask users for feedback on your site The web provides a unique opportunity to quickly gather specific info from users from distant locations web surveys
User Analysis 4. Define your audience/user profile Is your audience inside/outside the company? (User of intra/internet) ID category of target group ID level of expertise in the group Determine order of info preferences i.e. what info they want to see first, second Define audience characteristics profession, age, location, gender Describe scenarios of use situations where the site may be used Describe users range of abilities vision, hearing, mobility, cognitive impairments
User Analysis 4. Define your audience/user profile contd. Describe users environment note any environmental challenges (Ex: poor light, noise, technical challenges such as screen size ) ID users level of technical expertise Determine what HW & browser SW your audience uses ID what monitors & screen resolution your audience uses
User Analysis Example - Exotic Fruits Company Company: Sells exotic fruit Defining your purpose:: Web site purpose: Attract new customers and enable the to purchase fruit online Defining your target audience: Must determine who is likely to be interested Ex: list of restaurant chefs, immigrants from the fruits native region, adventurous cooks, vegetarians Must determine which user group you can best serve Ex: Small farm with limited production capacity excludes buyers from large produce departments Determine which users on the list are most likely to have access and purchase from the web
User Analysis Example - Exotic Fruits Company Define your audience/user profile Is your audience inside/outside the company? (User of intra/internet) ID category of target group (Ex: person from the food industry?) ID level of expertise in the group (Ex: food professional, connoisseurs) Determine order of info preferences i.e. what info they want to see first, second (Ex. First might want to see what fruits are in season, then might want to see the costs of those fruits ) Define audience characteristics profession, age, location, gender
Competitive & Market Analysis Know your competitors Know your relative strengths and weaknesses Create a design strategy that capitalises on your strengths Try to aim for what you are offering is unique
Competitive & Market Analysis Find out who your competitors are Research your competitors Use keyword searches Ask users who your competitors are Check back with your competitors site frequently This info will help clarify and strengthen your strategy Remember that your competitors will not be standing still they may be developing new sites as you are evaluating their old ones
Competitive & Market Analysis Rate competitors site Your Site V s Competitors Site Is the purpose of the site clear? Does the site clearly address a particular audience? Is the site useful and relevant to its audience? Is the site interesting and engaging? Does the site enable users to accomplish all the tasks that they need and want? Can they be accomplished easily? Is the info organised in a way that users will expect and understand? Is the most important info easiest to find? Is the textual info clear, grammatically correct and easy to read?
Competitive & Market Analysis Rate competitors site contd Your Site V s Competitors Site Do you have a clear idea of what the site contains? Do you always know where you are, and how to get where you want to go? Is the presentation attractive? Do pages load quickly enough?
Competitive & Market Analysis Examine other media presentations of your subject matter You want to compete with not only their website but with their other means of advertising to the customer Ex: broadcasting, print, TV, Analyse how the competitors do it and try to do it better!
Strategy Define your strategy The clearer the strategy the more efficiently your goals will be accomplished Decide what you want to do: Sell Educate Entertain Persuade Provoke Your strategy should be a balanced relationship between your purpose, the needs and tastes of your intended audience, the strengths and weaknesses of your competition, and your own available resources and capabilities
Strategy
Strategy Steps in defining your strategy Select a visual and language presentation approach should develop your site that will upload quickly Select images that will not take too long to download Plan site features that will help you meet your goals (Chat area or forum, Social media ) ID your capabilities and how they can be used to meet your goals (Ex: Does your staff have the capabilities, knowledge and skills to write good recipes for the exotic fruits? Do you have the budget to pay for high quality illustrations? Does your design and maintenance staff really understand the communication and technical issues involved in keeping a forum engaging?)
Strategy Set measurable strategic goals The goals you set should allow you to determine once the site is complete if it is meeting its overall purpose Ex: Goal to have 10% increase in sales during the first quarter after publishing your site involves recording number of hits on your site
Content ID info content When performing user analysis the user is asked to rate different topics according to their interest in them When designing focus on the feature that the users rated as most interesting Plan content that utilises web technology in unique and appropriate ways Users will be drawn to your site if you present your ideas and work in a way that other sites do not
Content Design your site so that it is accessible to a full range of users Provide support for users with physical, environmental or technical limitations Plan to give users content that will format correctly in their browsers Remember to ensure you test your site on a range of browsers and platforms.
Schedule of Time & Resources Schedule development timeline Create a schedule to help you ensure that you meet your development deadline Step A: List each step in the process Step B: Predict the amount of working days that each step in the process will take Step C: Work out each step into a Gantt Chart Step D: List completion dates for each step based on your Gantt Chart
Sample Schedule
Sample Gantt Chart
Schedule of Time & Resources Plan for an iterative development and design process Every process will consist of a series of stages These stages should naturally occur in sequence It is inevitable that discoveries made in one stage will cause you to revisit a previous stage Your plan should allow time for the cyclical nature of development and allow for more than one pass through each stage of the process Plan budget Resource budget should account for Personnel, hardware, server, software
Schedule of Time & Resources Assign a team Make sure you have the skills to develop and complete the web development process Schedule user involvement Schedule user involvement at various stages Remember to allow time in your schedule to make changes Best time to involve users: early in the planning & design stages
Schedule of Time & Resources Assign work to content providers and experts ID which content is already available and which needs to be created Determine who has the best expertise to provide the content Communicate your project plan with your team Create a document! This should clearly set out your intentions
Web Site Design Challenges Communicate your message to the user Provide a good user experience Ensure the user returns Ability to deal with a variety of browsers and platforms Need to ask the following questions: Does the navigation design enable the users to move around easier? Is the content organised in such a way that the user can easily find what they are looking for? What visual style should be used to appeal to the user? Is there a consistent look throughout the site?
Structure Develop a user-centred structure for your site Need to organise the site in a way that makes sense to the users People will have expectations of how to find different types of info and how to accomplish particular tasks Ex: Expect to search alphabetically, according to groups of similar objects, sequence of steps Recruit representative users Use card sorting techniques Helps to determine the optimal organisational structure Need to look at the task analysis results
Structure Create a flow diagram
Structure List the elements and links for each page of the diagram Make an itemised list of each pages content Text, images, sounds, video, audio clips, image maps, java applets, downloadable items, links Determine in how many places each item will appear Design hierarchies of breadth rather than depth
Navigation Use labels that clearly indicate the function of the link Use labels that accurately describe the destination and resulting action of links Avoid meaningless labels such as go or click here Provide feedback that tells users where they are in your site Use navigation elements consistently The same links should look the same and be in the same location, If they are not it will delay the completion of tasks Provide persistent links to the home page and to high level categories Should always have persistent links to your most important pages, ex: the to buy page Should feature on the masthead or left navigation bar
Navigation Ensure that image maps are accessible to visionimpaired users Provide alt text for hot spots Include a skip to main content link at the top of each page A page devoid of the navigation bars and top banner This can save the user time Test the navigation design Ask representative users to find particular info Do users know how to find the info they need? Does you navigation design connect all related info in a sequence that makes sense to users? Do users know where they are in the site structure? Do users know how to return to points where they visited previously? Are there any unnecessary links that clutter the navigation
Text Create effective headings and place important info first Use headings that quickly communicate the content of each section Inverted pyramid strategy allows reader to read the most salient info first and then read additional info if they like Keep links separate from narrative text blocks This will disrupt continuity and understanding Place links at the beginning or end of paragraphs Provide means for users to print groups of related pages Some readers will prefer to read hardcopies
Text Design for default browser fonts Different default fonts for different browsers Depends on the browsers, browser version and OS Defaults are mostly Times New Roman, Arial and Helvetica should make sure your design succeeds with these fonts Make paragraph text flush left Easier to read Test for readability Readability is affected by a number of factors: Font type, sixe, colour, contrast between text and background
Visual Layout & Elements Design within boundaries of an image safe area Anticipate the size of the users monitor and screen resolution settings Allow room for navigation bars Design in a style that will appeal to your audience s tastes
Visual Layout & Elements Test the visual design What would you perceive as the purpose of this site based on the presentation? What would you be looking for once you arrived at the site? What would you do next after seeing this presentation? What do you like and dislike about the presentation? What impression would you form of the company based on the visual style? Establish and/or comply with your organisations design conventions Use of the companies logo This will make your company become more recognisable to the public
Visual Layout & Elements Maintain consistent visual identity Use related visual elements throughout the site This will give a sense of unity and reinforce the users experience that they are rooted to a certain place Present your message efficiently and avoid clutter More is less Eliminate superfluous elements Info overload can cause users irritation and prevent them from finding the info that they want Draw attention to new or greatly changed content What's new? area Avoid requiring the use of horizontal scroll bars Stay within the image safe area Use top and left areas of the page for navigation and identity
Web Site Production Preparation Final Testing Site Rollout
Preparation Establish directory structure and file naming conventions Establish a method for version control Generate page templates Use relative links instead of absolute links
Final Testing Make sure clear error messages are provided Stage the site Conduct quality assurance tests Test to verify its accessibility Conduct performance testing Observe users carrying out a set of tasks Test in the client environment
Site Rollout Move the site to the destination server Test the site on the destination server Make backups
Web Site Maintenance Maintainability should be built into the system from the very beginning Maintenance categories: Corrections Adaptions Perfective Enhancements Maintenance programmers must have excellent debugging skills Avoid regression errors Provide detailed documentation of the error and how it was fixed
Web Maintenance Issues Keep users up-to-date on content changes Maintain links Maintain version control Track site activity Respond to users that give you feedback