02 User Experience | Web Design Basics

User Experience means making every visitor feel like your website was built just for them.

That there are User eXperience professionals demonstrates that the web has grown up just like print or broadcast. That it has grown up different from print is the nature of the hypertext links, interactivity and different form factors that the media takes. Web sites have become so complex and feature rich that they require the services of information architects and user experience designers. The web sites designed in this class will not be that complex, but the needs that drive the industry to create user experience designers is very much present, and should be reflected in your web site.

Know The User

Users employ a number of shortcuts that have to be taken into account. They do not read the page linearly, and usually read only the top-left hand corner, if they read anything at all. They scan pages, usually spending little time on any one page, as if they are in a hurry. The user knows that they do not need to read everything, and they have gotten used to doing just that.

They can usually tell that they want and decide whether or not to continue in a fraction of a second, and that is all the time that you will have. If they continue, it means you aroused their interest.

When the user gets to a page, they often have something in mind and that is all they are interested in. This is not logical or rational, but driven by a mix of desires called satisfice. Satisfice combines satisfy with suffice, and it means that a user will select the first reasonable match to what they are looking for that they find, not necessarily the best choice. Truth is, most users don’t really care to evaluate their options, and they will muddle through till they get what they are looking for.

How often do you read a manual before using a product? If you are like most people, rarely, and so it goes for web sites.

That means a web site has to anticipate the users’s habits if it wants to communicate effectively. You have to know the user. Most of you will be designing for peers, faculty or prospective employers, three very different users with different requirements. The challenge is to be clear about your audience and to target them in your writing and design.

Understand Experience

A website’s success hinges on how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the central tenets of a user-centered design, and that’s the base line for beginning the design process.

Once you have targeted your user you have to design for them, and then test to see if this has actually been the case. Does the website provide value, is it easy and pleasant to use? This is the roll of user testing, and there are software packages that will help you facilitate this.

How does a web site provide good value? Easy to navigate will not be a problem with the web sites that you will create here. Will the web site provide that something extra to make it stand out? There are too many web sites out there to be just like the rest. You need to stand out!

What makes the user experience? Low barriers to getting what they are looking for, pleasant surprises and a good story. Ease of use, effective communication and novelty can be designed, but a good story is integral to the developing and presenting of the content itself.

Good story telling gets the reader hooked on the protagonist. Once hooked, the author can tortures the hero until they break, at which point in time they somehow manage to overcome all obstacles for a cathartic resolution. A good writer will do that with each scene, emotionally grabbing the reader so that they cannot put the book down.

In the same way, a good design can turn a product into a coveted experience, one that satisfies something in the user by how it is presented, ideally anticipating the user’s actions and motivations, and can teach, motivate, persuade, inform or inspire the user, for that is how users form positive emotional experiences so important in successful communication. There is no joy if nothing resonates.

Understand Information

A simple web site will seem pretty straight forward, but as the complexity ramps up, the information architecture becomes daunting, especially since websites are not static systems, but are in a continual process of being reinvented, and the content is continually repurposed. This is a fact of life for sites like the New York Times.

To manage the daunting amount of complexity, a process emerged to help manage it all. The treasure map is a list of user experience deliverables: stories, proverbs, personas, scenarios, content inventories, analytics, user surveys, concept maps, system maps, process flows, wireframes, storyboards, concept designs, prototypes, narrative reports, presentations, plans, specifications, style guide and design patterns. Not all of these will be useful, but there are a lot of techniques to help you create and test the user experience.

Navigating the content is full of junctures where decisions are made. To prototype such decisions logical flowcharts are created called user flows. It is impossible to design an information hierarchy fully loaded with content, so designers take the content away and are left with a wireframe.

Wireframes are an integral part of developing the web site, and each of you will get your chance to build one with the midterm project. Removing what the content looks like allows the designer to focus on the information hierarchy, of what comes where, not just on the page, but throughout the site. Wireframes isolate user interaction by including only those elements that are absolutely necessary, like site navigation, headers, and content locations, and then only by empty shapes that allow the site to be easily modified to the user requirements before locking in the code.

The goal of the wireframe is to structure the content so it’s understandable and easy to use. As you will see, CSS’s box model is ideally suited for developing an interactive wireframe, but I require that you first develop your ideas on paper in quick thumbnails. There is no better, faster and comprehensive way to foster your creative impulse to do good work than by using paper and pencil, and to sketch out what’s on your mind. A few minutes brainstorming will be followed with hours of less creative implementation, if not tedious and often frustrating development, so make these minutes count.

You can go straight from the thumbnail to the wireframe. If you were doing a more official site, the procedure would require you figure out the relation between the content and the navigation first. If you were an information architect, this is how you would describe it:

Write down and organize the site objectives.
List the content requirements.
Determine the appropriate page hierarchy for the site, be it top down or bottoms up.
Design the navigation to access this hierarchy. Note that the navigation does not need to mirror the hierarchy, and can take the form of a matrix, be organic, or even linear.
Standardize the navigation architecture with the organization of the content, and you are ready to create a complete diagram of the information architecture.
You will create a wireframe mockup from that diagram which will show the placement of the navigation elements in relation to the content of the site.

Strive for Simplicity

KISS! Keep it simple is the mantra, and for emphasis they add the second “S” The user is concerned with the content, not how it is presented. The presentation should be like the cuts in a movie: transparent, intuitive and emotionally effective. The design should not get in the way of the user experience, period. Keep it simple!

The Landing Page

This is the page you land on. If it does not capture your audience, they will not go further, and you will have lost your chance to communicate. There are a lot of things to consider, for it is a marketing campaign, and not just a design problem.

To help you along, unbound has a number of videos to make you think twice about how you put your landing page together. Check out this video critique. It will hopefully inspire you to do the right thing when it comes to your own landing page.

User Experience Guidelines for Apple’s iOS

Apple’s done a great job implementing user experience guidelines from the very beginning. We can all be thankful that Steve Jobs oversaw the creation of the Macintosh and the Next Computers, both of which pushed intelligently designed user interfaces from the beginning. The new way forward at first appear a step backward, as a finger is not nearly as precise as a mouse, but precision is not what user interaction is about, and immediacy has won out.

These are the topical headlines from the iOS User Experience Guide. They are equally relevant to the web sites you make that will be appearing on these iOS. The user experience revolves around streamlined interaction with content that people care about.

Focus on the Primary Task
Elevate the Content People Care About
Think From the Top of the screen Down
Give People a Logical Path to Follow
Make Usage Easy and Obvious
Strive to make your content instantly understandable to people,
Make the main point of your content immediately apparent.
Be consistent
Use User-Centric Terminology
Minimize the Effort Required for User Input
Enable Collaboration and Connectedness
Brand Appropriately
For the best user experience, you want to quietly remind users of your identity.
Avoid taking space away from the content people care about.
Entice and Inform with a Well-Written Description
Be sure to correct all spelling, grammatical, and punctuation errors.
Keep all-capital words to a minimum.
Be Succinct
Think like a newspaper editor, and strive to convey information in a condensed, headline style.
Give buttons short labels, or use well-understood symbols, so that people can tell what they do at a glance.
Use Design Elements Consistently
Consider Adding Physicality and Realism
Use appropriate animation to further enhance realism in your application.
Delight People with Stunning Graphics.
Consider replicating the look of high-quality or precious materials.
When appropriate, create high-resolution artwork.
Make Targets Fingertip-Size
Give tappable elements in your application a target area of about 44 x 44 points.
Use Subtle Animation to Communicate
Add animation cautiously
Make animation consistent
Restrain Your Information Hierarchy

Google User Experience Manifesto

As you can imagine, there is a lot more to this that you had probably thought about when you entered the class. That is how it goes. I want to leave you with Google’s Googlification, if that is a word. This is their user Experience manifesto.

Our aspirations

The Google User Experience team aims to create designs that are useful, fast, simple, engaging, innovative, universal, profitable, beautiful, trustworthy, and personable. Achieving a harmonious balance of these ten principles is a constant challenge. A product that gets the balance right is “Googley” – and will satisfy and delight people all over the world.

Ten principles that contribute to a Googley user experience

Focus on people their lives, their work, their dreams.
The Google User Experience team works to discover people‘s actual needs, including needs they can‘t always articulate. Armed with that information, Google can create products that solve real-world problems and spark the creativity of all kinds of people. Improving people‘s lives, not just easing step-by-step tasks, is our goal.
Above all, a well-designed Google product is useful in daily life. It doesn‘t try to impress users with its whizbang technology or visual style – though it might have both. It doesn‘t strong-arm people to use features they don‘t want – but it does provide a natural growth path for those who are interested. It doesn‘t intrude on people‘s lives – but it does open doors for users who want to explore the world‘s information, work more quickly and creatively, and share ideas with their friends or the world.
Every millisecond counts.
Nothing is more valuable than people‘s time. Google pages load quickly, thanks to slim code and carefully selected image files. The most essential features and text are placed in the easiest-to-find locations. Unnecessary clicks, typing, steps, and other actions are eliminated. Google products ask for information only once and include smart defaults. Tasks are streamlined.

Speed is a boon to users. It is also a competitive advantage that Google doesn‘t sacrifice without good reason.
Simplicity is powerful.
Simplicity fuels many elements of good design, including ease of use, speed, visual appeal, and accessibility. But simplicity starts with the design of a product‘s fundamental functions. Google doesn‘t set out to create feature-rich products; our best designs include only the features that people need to accomplish their goals. Ideally, even products that require large feature sets and complex visual designs appear to be simple as well as powerful.
Google teams think twice before sacrificing simplicity in pursuit of a less important feature. Our hope is to evolve products in new directions instead of just adding more features.
Engage beginners and attract experts.
Designing for many people doesn‘t mean designing for the lowest common denominator. The best Google designs appear quite simple on the surface but include powerful features that are easily accessible to those users who want them. Our intent is to invite beginners with a great initial experience while also attracting power users whose excitement and expertise will draw others to the product.
A well-designed Google product lets new users jump in, offers help when necessary, and ensures that users can make simple and intuitive use of the product‘s most valuable features. Progressive disclosure of advanced features encourages people to expand their usage of the product. Whenever appropriate, Google offers smart features that entice people with complex online lives – for instance, people who share data across several devices and computers, work online and off, and crave storage space.
Dare to innovate.
Design consistency builds a trusted foundation for Google products, makes users comfortable, and speeds their work. But it is the element of imagination that transforms designs from ho-hum to delightful.
Google encourages innovative, risk-taking designs whenever they serve the needs of users. Our teams encourage new ideas to come out and play. Instead of just matching the features of existing products, Google wants to change the game.
Design for the world.
The World Wide Web has opened all the resources of the Internet to people everywhere. For example, many users are exploring Google products while strolling with a mobile device, not sitting at a desk with a personal computer. Our goal is to design products that are contextually relevant and available through the medium and methods that make sense to users. Google supports slower connections and older browsers when possible, and Google allows people to choose how they view information (screen size, font size) and how they enter information (smart query parsing). The User Experience team researches the fundamental differences in user experiences throughout the world and works to design the right products for each audience, device, and culture. Simple translation, or “graceful degradation” of a feature set, isn‘t sufficient to meet people‘s needs.
Google is also committed to improving the accessibility of its products. Our desire for simple and inclusive products, and Google‘s mission to make the world‘s information universally accessible, demand products that support assistive technologies and provide a useful and enjoyable experience for everyone, including those with physical and cognitive limitations.
Plan for today‘s and tomorrow‘s business.
Those Google products that make money strive to do so in a way that is helpful to users. To reach that lofty goal, designers work with product teams to ensure that business considerations integrate seamlessly with the goals of users. Teams work to make sure ads are relevant, useful, and clearly identifiable as ads. Google also takes care to protect the interests of advertisers and others who depend on Google for their livelihood.
Google never tries to increase revenue from a product if it would mean reducing the number of Google users in the future. If a profitable design doesn‘t please users, it‘s time to go back to the drawing board. Not every product has to make money, and none should be bad for business.
Delight the eye without distracting the mind.
If people looked at a Google product and said ”Wow, that‘s beautiful!” the User Experience team would cheer. A positive first impression makes users comfortable, assures them that the product is reliable and professional, and encourages people to make the product their own.
A minimalist aesthetic makes sense for most Google products because a clean, clutter-free design loads quickly and doesn‘t distract users from their goals. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and easy navigation. Still, ”simple elegance” is not the best fit for every product. Audience and cultural context matter. A Google product‘s visual design should please its users and improve usability for them.
Be worthy of people‘s trust.
Good design can go a long way to earn the trust of the people who use Google products. Establishing Google‘s reliability starts with the basics – for example, making sure the interface is efficient and professional, actions are easily reversed, ads are clearly identified, terminology is consistent, and users are never unhappily surprised. In addition, Google products open themselves to the world by including links to competitors and encouraging user contributions such as community maps or iGoogle gadgets.
A greater challenge is to make sure that Google demonstrates respect for users‘ right to control their own data. Google is transparent about how it uses information and how that information is shared with others (if at all), so that users can make informed choices. Our products warn users about such dangers as insecure connections, actions that may make users vulnerable to spam, or the possibility that data shared outside Google may be stored elsewhere. The larger Google becomes, the more essential it is to live up to our “Don‘t be evil” motto.
Add a human touch.
Google includes a wide range of personalities, and our designs have personality, too. Text and design elements are friendly, quirky, and smart – and not boring, close-minded, or arrogant. Google text talks directly to people and offers the same practical, informal assistance that anyone would offer to a neighbor who asked a question. And Google doesn‘t let fun or personality interfere with other elements of a design, especially when people‘s livelihood, or their ability to find vital information, is at stake.
Google doesn‘t know everything, and no design is perfect. Our products ask for feedback, and Google acts on that feedback. When practicing these design principles, the Google User Experience team seeks the best possible balance in the time available for each product. Then the cycle of iteration, innovation, and improvement continues.

UX Crash Course: 31 Fundamentals

want to learn more? Joel March has put together what 31 fundamentals. They are short and to the point, and an illustration of his XU Perspective in which everything rotates around XU.

Introduction & Key Ideas

#01 — What is UX?

#02 — User Goals & Business Goals

#03 — The 5 Main Ingredients of UX

****

How to Understand Users

#04 — What is User Research?

#05 — How to Ask People Questions

#06 — Creating User Profiles

#07 — Designing for Devices

#08 — Design Patterns

****