Chapter 1: What is Web Design?

Transcription

1 Site Design & Usability UCSD Extension Presented by Thomas A. Powell PINT Inc. Slides Adopted from Web Design: The Complete Reference Chapter 1: What is Web Design? What is Web Design? The idea of Web design means many different things to different people. Web design depending on the person includes many things such as: Visual design Programming HTML Navigation issues Usability Business issues (e-commerce) Depending on the project Web design actually may draw from any of these areas so it truly can be a very multidisciplinary field. 1

2 What is Web Design? Four primary aspects to Web Design Content To inform or persuade users Technology To implement the function of the site Visuals To provide the form of the site Economics To give purpose for the site The influence of one aspect or another of site design varies on the project. Personal home page may not have economic issues Shopping site may be less concerned about the visuals The Web Design Pyramid Metaphor of a Web site like a pyramid Content is the bricks we use to build the pyramid The foundation rests on visuals and technology Economics make the project worth doing As Web designers we try to build our pyramids carefully but construction is difficult because we build on the shifting sands of fast changing technology and tastes. Team work and a firm understanding of the Web medium is required Even when building a great sites our visitors may look at it with puzzlement. What s the purpose they wonder. Where is the door?! The Web Design Pyramid 2

3 Building Web Sites Don t underestimate the Web. Building sites can be difficult Some of the core technologies like HTML are pretty easy to master, yet developers make numerous mistakes. Why? Lack of developer experience particularly with the Web medium coupled with a lack of well-defined process and highly accelerated schedules. Because of time constraints or inexperience many designers tend to start from one extreme or another Start out building the site from the visuals and figure out what to do later. Design document is a picture Results in sites filled with giant images or sites that are built entirely in Flash You might term this sites brochureware or introware Note: For an artist portfolio site this may be the best approach but for many sites it is not. Visuals First Design Looks good but may not work right or be flexible enough. Other examples: Technology First Some designers instead focus on doing only the technology first Sometimes the HTML, JavaScript, frames, Java applet, etc. is added first an then there is an attempt to decorate the site. I call this approach Christmas Tree design. A few colored balls, clip art and animated GIFs in a fruitless attempt to make the site look good. Like a visuals first site a technology first site is used more to show off what a designer can do but in the technical arena. Technology-first sites tend to practice exclusionary design and use the latest browser innovations. 3

4 Technology First This example is still clean looking but notice the requirements, pulldowns,windows, etc. Web Development Process Model Both technology and visuals are required in Web design and must relate directly to the purpose of the site. Should use a top-down or deductive approach to site design. Set a purpose From purpose build a specification Design to meet the specification Implement the design Test the design Release the finished product This process is similar to software engineering s waterfall or lifecycle model. This process splits development into a variety of steps to help guide you from general requirements to finished site. Web Development Process Model 4

5 Web Development Process Model The number of steps or name of steps in the model doesn t matter. Other process models are possible like modified waterfall, spiral, jointapplication design (JAD) and so on. Always remember the purpose of the process model is always to guide. The ideal process model helps us do things fast and accurately and hopefully is easy to learn. We ll take a look at the process of building Web sites later. First let s discuss some common mistakes and common themes of Web design. Building for Users One of the most common mistakes is building a site more to meet the wants and desires of the site s designer than its users. Web Design Rule: YOU are NOT the USER. You generally know more about the site than the user. You know where things are. You know about installing plug-ins You may have an optimal setup with screen, browser, bandwidth, etc. You must accept that users may not even have the same interests as you. What makes sense to you may not make sense to users. Building for Users Don t go overboard and then say I ll just ask the user Web Design Rule: USERS are NOT DESIGNERS. Users may not know what is realistic. Users may not be logical or realistic about their needs and wants. In short users don t have the sophisticated understanding of the Web medium the designer has. Just because someone has browsed a lot of Web sites doesn t mean they can design one. You may have seen many movies, but do you really know how to approach filming one? Goal: Always try to think from the point of view of the user and then verify your ideas with real users. 5

6 Building for Users User centered design is the term given to design which always puts the user first. What can we say about users? Is there a Joe Average Internet user? There is no typical average user, but there are traits such as reaction time, memory, and other cognitive or physical abilities we should consider when designing sites. However, always remember that beyond basic traits remember that people are individuals. Generally sites built to the common user may cause problems for the novice user or power user which leads to the following rule. Web Design Rule: Design for the common user, but account for differences. Utility and Usability Great Web sites are those that are truly useful to users. Usefulness is a combination of utility and usability. Utility describes a site s functionality (what is capable of) Usability describes the user s ability to manipulate the site s features to accomplish the goal. Two banking sites may provide similar utility but one may be so confusing that it is unusable. Usable sites will be efficient, easy to learn and help users accomplish their goals in a satisfactory and error free manner. Paper to Software Paradigm Shift In the past sites were often thought of as digital paper. Many print design concepts were applied. With increased functionality and the rise of e- commerce focus is shifting to a software centric approach to sites. Yet not all sites are the same, there is a range. 6

7 Dynamic Site Example ( Software implications Like software a Web site should only be considered excellent if it is useful, usable, correct, and pleasing. Some of these ideas are somewhat subjective except in the case of correctness. Correctness says the site s execution must be excellent. Can t break in ANY way HTML correct Images render as designed Interactive elements like JavaScript, CGI, etc. must function properly and not result in error messages. The navigation of the site must work. Broken links with the 404 error should be considered serious errors. Seems obvious but many sites are well executed. Web Design Rule: A site s execution must be close to flawless. The Execution Problem Why such poor execution? Technology shifts How many versions of HTML, JavaScript, CSS, Flash, etc. have been released recently. Lack of developer experience Aggressive time lines Lack of methodology No consideration for medium restrictions Technology Network Web designer who ignores technical and medium effects is like the printer who will not admit that ink bleeds on paper. Web Design Rule: Know and respect the Web and Internet medium constraints. Constraints range from browser and bandwidth to programming and protocols. 7

8 Web s GUI Heritage Many sites provide more than content, but allow users to interact or manipulate content just like regular software. E-commerce, online banking, software download, gaming, chat, etc. Web sites are not identical to traditional software Built using similar technologies Distributed differently Must be quickly learnable (sorry no documentation to save a poor design) Lack an install/uninstall barrier Very content focused Integrate marketing more directly May have complex time or distribution considerations Think of superbowl.com While sites are different they do rely on basic GUI (Graphical User Interface) components: windows, icons, menus, and pointer. Some call this the WIMP interface. Web s GUI Heritage Web is modified GUI No double clicking Dragging? However, shouldn t we build on what people know and expect from normal software? Menu position Stability Common icons Web Design Rule: Web sites should respect GUI principles where appropriate. Traditionally Mac and Windows have guidelines to follow to be considered to be standard. Q: Does the Web have such a controlling body? A: No, not even the W3 really can spec interface rules. Web s GUI Heritage Conventions based upon tradition, social forces, technology, common sense, and even random chance have created somewhat of a Web standard. Color Blue = click Change your link colors and you confuse people for sure. Logo in upper left = back to home 8

9 Navigation Unlike most GUI apps (except CD-ROM references) Web sites require a user to navigate through large amounts of content. Clear navigation is key to a good Web site. Who cares if a site has great content or good functionality if a user can t find things. Navigation however is not as important as many people think. Web sites are not places! Users should not notice navigation. The focus should not be on moving or doing, but on the content or task. Web Design Rule: Navigation is only a means to an end result. Users will not marvel over your ingenious navigation particularly if it breaks with convention. Brand in your buttons and you may find you confuse people. Navigation To improve navigation designers like to bring structure to a site. Choosing a good site structure will make it easier for users to fin their way. Aids such as site maps, search engines, site index, and help systems will help users find things. Location really only matters to a user when they can t find what they are looking for. Users do not form flowcharts in their minds as they navigate sites. Users are information foragers, as long as the sent to the goal is strong, they don t feel lost, and they feel they are making progress towards a successful end result the user will be happy. Looks Matter Navigation is subtle. Great sites are more about function, navigation, and content (think Yahoo, Amazon, etc.) but there must be at least neutral if not excellent visuals to have a good site. Looks matter. However do Web designers necessarily set look? First impression counts with many Web sites. Home page is heavy bailout Home page orients Users may not wait Users may not be encouraged to explore Users are known to equate trust to positive visuals when not relying on outside information. 9

10 Looks Matter Web Design Rule: Visuals heavily influence the user s initial perception of a site s value. However, first impression will not make up for other problems. The Take Away Value When a user exits a site they have a take away value how successful was the visit. Did they like it, hate it, or was it just so-so? What causes the feeling? Slow pages, nice graphics, no content, broken technology, easy function, etc. Web Design Rule: A site s take away value is influenced by visuals, content, technology, usability and goal accomplishment. Form and Function Balance A key problem with Web design is that sites often do not balance form and function. Form should follow function. Site s look should relate and even help the function. Of course for form to follow function the function or purpose of the site has to be clearly defined. Consider the look and feel of sites like Yahoo!, Amazon, Excite, etc. Is function limiting design choices? Some believe a site should be distinct so people remember it. The different door knob doesn t encourage revisits to your store though it may make memorable. Make distinct with content, function and experience not navigation. Web Design Rule: Do not invent interfaces to build brand. 10

11 What is good Web design? What is good will vary from project to project depending on the site s purpose. A video game wouldn t have the same design considerations as Microsoft Word. Killer, cool, sizzling, etc. sites should necessarily be what you pattern yourself after. Consider the splash page For some sites this page should be called the send away page For other sites not having a splash page is like removing the title or opening credits of a movie What is good Web design? Web Design Rule: There is no form of correct Web Design that fits every site or situation. What is good Web design? Consider even page size considerations. Some say 50K is a good size particularly since slow pages are a big problem. With high bandwidth would 50K pages make sense? Cable modem sites may have to be designed differently than normal sites With wireless access the game changes again No bandwidth Small screen Different browsing environment Outside the office Noisy Imagine paging through a normal Web site on some LCD cellphone screen while driving a car. The rules are good, but understand their motivation and know when to break them. 11

12 Web Site Evaluation Avoid knee jerk sucks or cool style reviews What s bad is pretty obvious Under construction Slow pages Overly animated pages Confusing navigation Hard to read pages Avoid pointing out what is bad so much, strive to see the good points and copy them. When running an evaluation make sure to reverse the development process. Walk up and down the waterfall Who is it for? What is it supposed to do? How was it done? Demo: Sample Site Evaluations In Search of Web Design So what is Web design? User centered, multi-disciplinary design pursuit that includes influences from visual arts, technology, content and purpose. The Web borrows from old (print, software, etc.) and invents new ideas (portals, content focus, single click). Old design philosophy is WYSIWYG (what you see is what you get) Based on a screen/printer disparity Today the ultimate goal may not be to create paper but to accomplish task or find info Users don t want to get some standard thing they want to control things or at least think they are. Think about personalization and sites like myyahoo Web Design Rule: Control should be given or at least appear to be given to the user. Chapter 2: The Web Design Process 12

13 The Web Design Process? Software Crisis is similar to Web crisis Just look around it is easy to see flaws It is even easier to break Web sites Many sites follow a simple ad hoc process at best HTML poorly executed Navigation seems poorly planned JavaScript doesn t follow simple programming practices Broken Links In short little planning and poor quality assurance Beyond ad hoc process the simplest way to improve things is to adopt a process model that guides a project. The most well known are topdown models The Web Design Process Standard Waterfall The Web Design Process Standard Waterfall Issues The waterfall model is easy to understand but it doesn t address all the issues facing Web designers Discrete steps aren t always easy to define Doesn t deal with change well Web sites are always changing Slower than many other process models Web sites seem to be on a deliver it yesterday timeline Lots of risk involved when the first stages are rushed However, despite its problems the Waterfall model is easy to implement and should be a first step for many designers. It is particular good for initial site development. Modification of the waterfall can be made to deal with risk and change factors 13

14 The Web Design Process--Modified Waterfall The Web Design Process--Modified Waterfall Issues Even the modified Waterfall approach doesn t deal with all problems Invariably clients or other decision makers change their minds. Some clients are unable to articulate what they are looking for Sometimes we just don t really know what will work so taking a shot or building a prototype works well. Many sites use this spaghetti approach see what sticks Joint Application Design (JAD) seems to deal with these issues but has serious drawbacks End up building the wrong site many times to make the right one People often marry the prototype Problems with prototypes can be damaging (The release too soon syndrome) Cost control can be hard; it s difficult to budget for these projects The Web Design Process (JAD) 14

15 The Web Design Process We are going to adopt a simple modified Waterfall approach to design for our discussion A great deal of time will be spent on the goals and early planning to avoid building sites that don t make sense Time will be spent considering the user needs carefully. The Web Design Process Step 1 First talk about goals and problems No goal Vague goal Goal should be measurable otherwise you are at risk Build a customer support site that will improve customer satisfaction by providing 7/24 access to common questions and result in a 25% decrease in telephone support. Create an online car parts store that will see at least $10K/month of product directly to the consumer. Develop a Japanese food restaurant site that tells potential customers about menu, hours, and prices. Is the last goal a good one? Why or why not? A goal at the start of the project should be to come up with a short a long form of a site s goals. (Mission Statement + Project Description) The Web Design Process Brainstorming process Techniques Get read to use the whiteboard Start with what people don t like particularly on a redo project if it is difficult to determine what to do. Create a wish list. Let the wish list get a big as it needs too Don t throw out any idea at this stage Narrow the wish list and try to get people to compromise Everybody wants to be on the homepage 3x5 card technique helps 15

16 The Web Design Process Audience discussion Profile your audience Who are they What do they want to do Talk to users Surveys and interviews Be careful not to direct the results The Web Design Process Given goals and audience you should be able to begin to figure out what is necessary to accomplish the goal. These are the requirements. Requirements include staffing, content, technology, graphics, etc. In short everything you need to do the job. You don t have to put it together quite yet. The Web Design Process Build a site plan Short goal statement Detailed goal statement Audience Discussion User Scenario Discussion Content Requirements Make a matrix of what is needed Technical Requirements What type of tech is needed (JavaScript, Flash, etc.) Visual Requirements Are there design parameters like color, font, logo, other media that needs to be considered when building the site. 16

17 The Web Design Process Delivery Requirements Site Structure diagram (flowchart) The Web Design Process Staffing Timeline Budget With the design document in hand and approved it may be time to actually start the design. Web Design Suggestion: Always collect the content before design if at all possible. Slowest aspect of projects. Content should influence the design (form follows content) The Web Design Process Try a conceptual block diagram to workout positions 17

18 The Web Design Process Design sketches should within a browser window since it serves as a frame. Also start from the home page and then work down. The Web Design Process Sketch out not just look but storyboard an action such as form fill-out. Design Process Don t marry your design prototypes. Listen to your users and refine things. Build a mock site with no content Retest the mock site with users Implement your site with real content and final technology. Test your site well. Web Design Rule: Sites always have bugs. Web Design Rule: Testing should address all aspects of the site including content, function, visuals, and purpose. 18

19 Design Process User test is the most important form of testing and should be performed one final time before release. Once your site is released you aren t done. Site development is an ongoing process. Plan, design, develop, release, repeat. It isn t as easy at it seems. The real world has lots of challenges. Outside experts, silver bullet tools, bad timelines and budgets, people problems, etc. Chapter 3 Designing for Users User Centered Design Web sites are often developed from one particular philosophical reference point. Content centered Technology centered Visually centered The real emphasis when building sites should always be the user. Keeping the user always in mind is the key idea behind user centered design. 19

20 Usability Definition: Usability is the extent to which a site can be used by a specified group of users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use. From Nielsen 5 ideas that determine the usability of a site Learnability Rememberability Efficiency of use Reliability in use User satisfaction The fifth item may be the big one if you think carefully about the problem. Usability Rule: There is no absolute idea of what constitutes a usable site. Usability will vary as much as the users accessing the site. Rule: Usability depends on the medium of consumption. Remember the onscreen, on paper, by audio, etc. problem. Rule: Usability depends on the type of site as well as the user s familiarity with it. Usability Rule: Usability and user satisfaction are directly related. It seems obvious but user s tend to think that sites they are happy with are usable even when they might not be to someone who thinks the site isn t interesting. Conversely when a site is easy to use it tends to help users feeling about the site. 20

21 Who are Web users? Rule: Browsers do not use sites, people do. There is no generic person Be cautious of Joe AOL with the 14.4 modem idea. Even Yahoo! Shouldn t design for such an ambiguous individual. Suggestion: There are no generic people. Always try to envision a real person visiting your site. Common User Characterisitcs While there may not be a totally typical person people do have similar capabilities. Consider the prime way that a user interacts with a Web site (keyboard, mouse, monitor). Sight Reaction time Memory Other possibilities may include hearing Be careful of assuming that even with similar capabilities that there is not a range. Example: Vision varies from completely blind to excellent vision Vision The main concern is can the user properly read the display Contrast Dark on dark Light on light In short avoid any combinations of similar hue or lightness. Yellow and black provide greatest contrast, but of course white and black is close. Notice the increased use of white as background for content Notice that few huge sites really use complex background tiles. 21

22 Vision Size Too small Too big Be careful sizing text is not consistent across systems (Mac 12pt!= PC 12pt) Layout Too close together User has difficult time telling the difference between items Always remember to make things noticeably different. Slight differences will not pass our thresholds. Vision Color Can the user even perceive it? Do they perceive it properly Taste issue as well as usability think about link color in particular Even it everything is the same two people may not see the same color the same way. Monitors don t make life easy because color and brightness varies from monitor to monitor. Worse yet the end user can adjust things for better or worse. Should consider that Macs and Windows do not share the same Gamma value (basically brightness) so should aim either for Windows or something between the two. When we talk about color in depth we ll take a look at this. Memory Rule: Users try to maximize gain and minimize work. (The lazy person rule) Memory requires work! Rule: Recognition is easier than recall, so don t force users to memorize information. This is pervasive in Web design. Even consider link color. If you make visited links the same color or style as unvisited ones you are making the user memorize where they have been. Visual memory tends to be better than other forms of memory. Consider how to make the home page visually different than others. 22

23 Memory Short term memory wise, users are able to remember around 7+/- 2 items. This is important to consider for button clusters. Do not go crazy with this idea and limit your site to only this many buttons per page as this will result in excessive clicking. Users are not interested in more than 3 clicks to reach content in most cases. Reaction Time 0.1 second This is the limit for having the user feel that the system is reacting instantaneously, don t have to keep them informed in even the slightest way 1.0 second This is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data. Reaction Time How long will people wait for sites? 10 seconds, 100 seconds, etc. Is it consistent? Users tend to be more patient with something they are unfamiliar with or that is a novelty Rule: The amount of time a user will wait is proportional to the expected payoff. 23

24 Reaction Time 10 seconds This is limit for keeping the user's attention focused on the dialogue. > 10 seconds Users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Think about status bars on installers Be careful on the Web, people may be patient more because it is new to them, over time this may not be the case. Consider that these are worst case times between responses or tasks. What does the user think a task is? A page load or an item being downloaded. Movement Capabilities Consider mouse and keyboard travel always in sites. Try to optimize keyboard access for all pages in a site. Minimize mouse travel distance between successive choices Minimize the distance between the primary hover zone and the back button. Consider Fitt s Law and make clickable regions large enough and close enough to be clicked accurately. Sensory Issues Be aware that users react to sensory stimulus in fairly similar ways Thresholds People s ability to notice things that are just barely different. Cocktail party effect The ability to focus on a single conversation within a large room of people might relate to a person s ability to focus on a single content item out of a page with many distracting elements. Sensory adaptation Users will start to ignore things which initially grab their attention. Consider continuous animation of banners or other attention grabbers. The idea of banner blindness probably results partially from these ideas 24

25 General User Types In general there are three types of users Novices May not understand Web conventions Will not understand site organization May want extra help like a tour, help system, or step-by-step wizard style interfaces Infrequent intermediates Know basic Web conventions well so they will know how to use various site features but may not know where things are Power users Like to use simple URLs, pull downs, search or site map for direct access Want to customize things to suite their own tastes Bandwidth, images, content shown, etc. May know navigation very well User Types Intermediate users are the most common for public Web sites. These users will spend most of their time elsewhere but will understand basic Web conventions so you better not break them. Other users may be very important depending on your audience mix. Aim to build an adaptive Web sites that meets the requires of novices, intermediates and advanced user, otherwise aim for intermediate. Users are real people so beyond these basic ideas they may be very different. User Types Real people will have real experiences the will bring to the table The 99% other Web site rule GUI conventions and other learned experiences Real people are not perfect and may have problems that you consider out of the ordinary Accessibility is the idea of trying to make a site workable for those with less than perfect vision, language skills, motor skills, and even connections! 25

26 Real Users Understanding YOUR audience is key Audience varies from site to site Profiling users Take a guess Make up character names Try to get in their shoes Interviewing real users Interview Rule: Be quiet! Figure out what kind of tasks they do. Avoid focus groups initially and try one on one Use focus groups to verify ideas Watch users Look at the tasks they perform Try to watch them without their knowledge The Other Master: The Client, Boss, Company, etc. With all the discussion on users people often then go to far and forget that the site is built to meet the needs of the client or boss. They are the ones paying for it. Site owners desires are not always congruent with the desires of the site s users Do users always want to see ads? Do they need to see them? Don t let the boss run the show too much and particularly avoid the I ve browsed a lot of sites, I know what people want people. Control There is always an unwritten contract between developer and user for control Users particularly novices users shouldn t be given complete freedom because they may make mistakes and hurt themselves Take away too much control and users may feel frustrated Users need to feel in control Las Vegas design The best solution should be unlimited user control within a fixed domain of possibilities that can result in no serious errors. 26