Simplifying User Experience Design
Dive into the art of designing user experiences with a blend of simplicity and functionality. Explore the balance between usability and aesthetics for engaging web design.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Designing the User Experience It s not wise to violate rules until you know how to observe them. T.S. Elliot And then you can violate them when you have good reason to do so, with full understanding of the consequences. P. McIntire
Introduction Style is a simple way of saying complicated things. Jean Cocteau, French poet, novelist, and playwright. 2
Introduction Jonathan Ive, Apple designer: "There is a profound and enduring beauty in simplicity, in clarity, in efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation it s about bringing order to complexity. 3
Introduction If designers do their job properly, visitors won t even notice how successful the designers were the design is transparent. A good web site is designed to work the way people think. 4
Introduction Two opposing camps in web construction: The Jacob Nielsen usability camp web pages should not be pretty, they should be usable. The web as an experience camp web sites should take advantage of the uniqueness of the medium, stretch the limits of the medium, challenge/engage/ mystify/amuse/enthrall the visitor. 5
Introduction Both are right, and both are wrong. Most of us don t have the freedom to design off-the-wall experience sites; we are creating sites for businesses. On the other hand, there is no reason those sites need to be plain vanilla. We are going to try to make sites that are both engaging and usable. 6
Introduction If you create a web site, you are indeed going to be a designer whether you want to be or not. It s your choice as to how good it is going to look. Good web sites are: Technically solid User-friendly Aesthetically appealing Easy to maintain (flexible, scaleable) 7
Introduction This next series of lectures will examine creating a well-designed user interface that is aesthetically appealing. 8
Introduction Remember, we don t have complete control over how our web pages display on the visitor s system: Colors and fonts display differently on different browsers, on different monitors, and on different systems, because of varying brightness, resolution, and color handling. WYSIWYG should be WYSINNWYG ( What You See is Not Necessarily What You Get ). 9
Introduction Computers are usually shipped configured to a display that is one or more steps down from what that system is actually capable of displaying. It never even occurs to the majority of users that they can easily change their display properties. Commands that work in one browser don t always work in others. 10
Introduction These factors make designing a good web page much more difficult than designing a good printed page. As a developer, you probably have the latest and greatest monitor, graphics card, browser, and plug-ins, as well as lots of RAM and a really fast connection. Keep in mind that the majority of visitors don t have all that. 11
Introduction On the other hand, we have some really cool tools like animation and free color that we don t have on a printed page. It s a fascinating and frustrating trade- off. 12
Analysis Introduction Why analysis? To avoid the following scenarios Hey, you go ahead and start coding while I go out and ask the users what they want. The pilot s good news bad news scenario. 14
Analysis Introduction Don t just sit down and start writing HTML in order to see progress fast. You will end up with a poorly-designed site that is difficult to navigate. Spend the time, effort, and money up front, to avoid disaster later. 15
Analysis Introduction The first steps of analysis: 1. Identify the purpose of your site. 2. Identify your target audience. 3. Analyze the tasks that will be performed on the site. 16
Identify the Purpose of the Site There are four basic purposes of web sites: To make money. To disseminate information or opinions. As a front end for a business application. To stroke someone s ego. 17
Identify the Purpose of the Site Purpose 1: to make money. Most web sites fall under this category. The owners of these sites include corporations, small businesses, dot.coms, and non-profit organizations. B2B (Business to Business) sites fall under this category. This is one of the hottest types of online business today. 18
Identify the Purpose of the Site Visitors goals on these sites include: Researching products. Purchasing products. Obtaining service. 19
Identify the Purpose of the Site Principles of making money on the web: It s not about art. It s not about ego. It can and should be about information. It s mostly about money. 20
Identify the Purpose of the Site Purpose 2: to disseminate information or opinions. Types: Corporate intranets, for publishing internal documents. Educational institutions, like NIU. Odds and ends of other sites: e-zines, health and hobby sites, fan sites, opinion sites (religious, political, and social). 21
Identify the Purpose of the Site Visitor goals: To obtain information. To read or express opinions. 22
Identify the Purpose of the Site Principles of disseminating information and opinions on the web: It s not usually about art (unless the topic itself is art). It may or may not be about ego. For instance, a political opinion site may very well be about the ego of the person whose opinions are displayed. It s mostly about information. It s generally not about money. 23
Identify the Purpose of the Site Purpose 3: as a front-end for a business application. Intranets, extranets. BUI/Browser User Interface as opposed to the traditional GUI/Graphic User Interface. Visitor goals: To get a job done, with maximum efficiency and speed and minimum training, errors, and hassle. 24
Identify the Purpose of the Site Purpose 4: stroking someone s ego, perhaps even your own. This includes personal sites, many opinion sites, and odds and ends of other types. Principles of ego-based sites on the web: It can be about art. It can be about information. It is always about ego. It might like to be about money. 25
Identify the Purpose of the Site The purpose of your site determines everything else, including branding: Creating individuality and market value around the concept of a product or company name. Associating a mood, theme, ambiance, product category with your company name and product. 26
Identify the Purpose of the Site Effective branding: Oreos, Cheerios, Ben and Jerry s ice cream, Godiva chocolate, Nike swish, iPod, Jaguar, Disney s mouse ears , UPS trucks. Bad example: Office Depot versus Office Max (which one do we have in town?). What about Staples? Ideally, visitors would still be able to guess the name of the site if we removed the name from the pages. 27
Identify the Purpose of the Site Try to find an organizing metaphor (that lends itself well to a visual interpretation) for the site, which makes design easier. United Airlines uses a globe. A hotel might use a check-in desk, concierge desk, restaurant, etc. 28
Identify the Target Audience You need to have a precise definition of the target audience, the people you are trying to lure into your site. If your target audience is college students who are fans of, say, Red Hot Chili Peppers, the site should look and function very differently than if the target audience is wealthy executives interested in buying luxury vehicles. 29
Identify the Target Audience Let s look at some potential audiences for various type of sites 30
Identify the Target Audience Business site visitors Current customers They could be checking product facts, verifying an order, checking shipping on an order, or placing a new order. 31
Identify the Target Audience Potential customers How did they get to a site? From a banner ad or link on another site. From a search engine. From printed promotional materials that listed the URL. Might want to have a different entrance page for each arrival method. Remember that the whole point is to get someone to open his or her wallet. 32
Identify the Target Audience Investors Every element of your site should promote the idea that the company is profitable and stable. There are legal guidelines about what you can say to potential investors and how you say it. Employees Example: the sales force might use the web site as a sales tool, or all employees might register vacation days through the web page. Intranet visitors might be using secure parts of the site for traditional transaction processing. 33
Identify the Target Audience Non-profit site visitors Activists and information-seekers Give them the information they need to support the cause. Donors They need information as well, plus they need to be convinced that the organization is legitimate and stable and will use donations wisely. 34
Identify the Target Audience Informational site visitors These visitors generally fall into two categories: Internal visitors External visitors 35
Identify the Target Audience Internal (intranet) visitors, mostly employees. There are often serious security issues here. Example: A credit card company, where some employees have access to all of a credit card holder s personal data, while others have access only to name and address or some other subset of data. Intranets generally have access to much higher bandwidths that do public websites, so download time is not such a critical issue. 36
Identify the Target Audience External visitors those accessing a public web site. The most important factors are organizing the information (which might be extensive) so that even casual visitors can find what they are seeking and minimizing bandwidth problems. 37
Identify the Target Audience Opinion site visitors Those accessing the site might support the opinions presented, might disagree with those opinions, or might be looking for information so that they can form an opinion one way or another. 38
Identify the Target Audience Ego site visitors The audience for an ego site is usually its creator and the more tolerant family and friends of that creator. If you are building an ego site, you have at least the potential of drawing a larger audience if you make it informational as well. 39
Identify the Target Audience Regardless, create visitor profiles, including: Health, age, and gender: implications for font size, color issues, accessibility Education: writing style, complexity Language: English only versus alternate versions Income level: who wants to or is able to buy what you are selling? Computer experience: tutorials, help files Expectations: theme, behavior, visitor interface structure User goals: what do they want to accomplish? 40
Identify the Target Audience Create visitor profiles (continued): Best Buy trains their new employees to recognize around eight different typical customers. Jill named from the mom on the old Home Improvement TV series kids, educational software, etc. Another one is a busy business exec. Another one is a young, male technology addict. 41
Identify the Target Audience You also need to identify the kinds of computer systems your audience will be using to view your site. You will be making design decisions based upon this knowledge. For instance, bandwidth considerations are less of a concern if all of your visitors are on high-end systems within a corporate intranet. They will be a major concern if some of your visitors are on low-speed, dial-up lines. 42
Task Analysis Identify the tasks the visitors will attempt to complete, the order in which those tasks will be executed, and things that could be done to expedite the entire process. Called a scenario or use case: a set of possible sequences of interactions between systems and visitors in a particular environment and related to a particular goal. 43
Task Analysis Can document this in the form of a flow diagram for complex tasks. Analyze how often and with what frequency they will perform each task. More frequent tasks should take priority. Less frequent tasks need more hand- holding. 44
Task Analysis What if the user doesn t complete the task? What to do if errors? 45
Analysis Summary Ask the clients what they need! Client survey forms http://www.web- redesign.com/chapter3.html 46
Information Architecture Categorizing and structuring information Content + Context + Usability 47
Information Architecture Well-designed web sites are usually a hierarchy: The home page. The main topic pages, just under the home page. The subsidiary pages any page under a main topic page or another subsidiary page. 48
Information Architecture Penny s Home Page Home Page 1. 2. 3. 4. 5. Contact Info page Personal Stuff page Main topic Web 101 Main topic page Main topic page Funnies Main topic page Main topic 2.1 2.2 3.1 3.2 5.1 Syllabus Subsidiary page Assignments Subsidiary page Subsidiary page Subsidiary page Subsidiary page Typical links include forward, backward, to home page, to all main topic pages, and horizontal links between sibling pages.
Information Architecture The prior diagram is a good visualization tool, but a lousy documentation tool. Instead, document the site structure in a text hierarchy, like on the following page (the way we require it for the site plan for this course) 50
