{"id":100,"date":"2012-08-23T00:23:21","date_gmt":"2012-08-23T00:23:21","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=100"},"modified":"2023-04-02T13:39:23","modified_gmt":"2023-04-02T13:39:23","slug":"02-ux","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/02-ux\/","title":{"rendered":"02 User Experience"},"content":{"rendered":"<h2>UX Design in a nutshell<\/h2>\n<p>Two video shorts made by <a href=\"http:\/\/www.addikt.tv\/\" target=\"_blank\"  rel=\"noopener noreferrer\">ADDIKT<\/a>  to describe the roll of the UX designer. <\/p>\n<ol>\n<li><iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/19131028\" width=\"600\" height=\"350\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\n<p><a href=\"http:\/\/vimeo.com\/19131028\" target=\"_blank\"  rel=\"noopener noreferrer\">ILUVUXDESIGN part I<\/a> from <a href=\"http:\/\/vimeo.com\/iluvuxdesign\" target=\"_blank\"  rel=\"noopener noreferrer\">lyle<\/a> on <a href=\"https:\/\/vimeo.com\" target=\"_blank\"  rel=\"noopener noreferrer\">Vimeo<\/a>.<\/p>\n<\/li>\n<li><iframe loading=\"lazy\" src=\"http:\/\/player.vimeo.com\/video\/21691333?title=0&amp;byline=0&amp;portrait=0\" width=\"600\" height=\"350\" frameborder=\"0\" target=\"_blank\" ><\/iframe>\n<p><a href=\"http:\/\/vimeo.com\/21691333\" target=\"_blank\"  rel=\"noopener noreferrer\">ILUVUXDESIGN part II<\/a> from <a href=\"http:\/\/vimeo.com\/iluvuxdesign\" target=\"_blank\"  rel=\"noopener noreferrer\">lyle<\/a> on <a href=\"http:\/\/vimeo.com\" target=\"_blank\"  rel=\"noopener noreferrer\">Vimeo<\/a>.<\/p>\n<\/li>\n<\/ol>\n<h2>User eXperience<\/h2>\n<\/p>\n<p><srong>User Experience means making every visitor feel like your website was built just for them.<\/p>\n<p>That there are <strong>U<\/strong>ser e<strong>X<\/strong>perience 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 <a href=\"http:\/\/semanticstudios.com\/publications\/semantics\/000228.php\" target=\"_blank\"  rel=\"noopener noreferrer\">user experience designers.<\/a>  Websites designed in this class will not be as complex but the needs that drive the industry to create user experience designers is demanded of your work as well.  <\/p>\n<h2>Fundamentals <\/h2>\n<\/p>\n<p>In order for there to be a meaningful and valuable user experience, information must be useful, usable, desirable, findable, accessible, and credible.<\/p>\n<ul>\n<li>Useful: Your content should be original and fulfill a need\n<\/li>\n<li>Usable: Site must be easy to use\n<\/li>\n<li>Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation\n<\/li>\n<li>Findable: Content needs to be navigable and locatable onsite and offsite\n<\/li>\n<li>Accessible: Content needs to be accessible to people with disabilities\n<\/li>\n<li>Credible: Users must trust and believe what you tell them\n<\/li>\n<\/ul>\n<h2>Know The User<\/h2>\n<\/p>\n<p>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 <a href=\"http:\/\/www.useit.com\/alertbox\/9710a.html\" target=\"_blank\"  rel=\"noopener noreferrer\">read anything at all<\/a>. 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.\n<\/p>\n<p>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.\n<\/p>\n<p>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 <em>satisfice<\/em>. 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&#8217;t really care to evaluate their options, and they will muddle through till they get what they are looking for.\n<\/p>\n<p>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.\n<\/p>\n<p>That means a web site has to anticipate the users&#8217;s habits if it wants to communicate effectively. <strong>You have to know the user.<\/strong> 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.<\/p>\n<h2>Understand Experience<\/h2>\n<\/p>\n<p>A website\u2019s success hinges on how users perceive it. \u201cDoes this website give me value? Is it easy to use? Is it pleasant to use?\u201d These are the central tenets of a user-centered design, and that&#8217;s the base line for beginning the design process.\n<\/p>\n<p>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 <a href=\"http:\/\/silverbackapp.com\/\" target=\"_blank\"  rel=\"noopener noreferrer\">software packages<\/a> that will help you facilitate this.\n<\/p>\n<p>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!\n<\/p>\n<p>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.\n<\/p>\n<p>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.\n<\/p>\n<p>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&#8217;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.  <\/p>\n<h2>Create a Story<\/h2>\n<\/p>\n<p>Create a website that has a <a href=\"https:\/\/image.slidesharecdn.com\/the-neuroscience-of-storytelling-for-professional-presentations-infographic-150219123855-conversion-gate02\/95\/the-neuroscience-of-storytelling-for-presentations-1-638.jpg?cb=1426101391\" target=\"_blank\"  rel=\"noopener noreferrer\">story<\/a> that is engaging and fun to engage, and not just coherent and informative.\n<\/p>\n<p><strong>Facts sit. Stories dance.<\/strong> About and bio pages come to life when they shape facts using the framework of a familiar, cherished story line. \u00a0Appealing narratives include:<\/p>\n<ul>\n<li> Underdog succeeds. \u00a0Since the days of the Bible, we love to root for David against Goliath, the unknown who overtakes from behind, the unglamorous tortoise who beats the boastful hare.\n<\/li>\n<li> Metamorphosis. \u00a0A caterpillar turning into a butterfly fascinates us. \u00a0Just beware of too many transformations in your story. \u00a0The butterfly then turning into a bird and then a monkey becomes bewildering.\n<\/li>\n<li> Discovery. \u00a0How did you invent, find or formulate what you&#8217;re now known for?\n<\/li>\n<li> Triumph. \u00a0A goal reached, obstacles defeated, the quest completed.\n<\/li>\n<li> Righting a wrong. \u00a0As long as the injustice remedied was uncontroversial to your audience, this makes a stirring tale.\n<\/li>\n<li> Unexpected joy. \u00a0Describe a surprising fun result from one of your efforts.\n<\/li>\n<\/ul>\n<p>Look at this <a href=\"http:\/\/www.nytimes.com\/video\/opinion\/100000004216589\/how-to-win-an-election.html\" target=\"_blank\"  rel=\"noopener noreferrer\"> Op Ed video<\/a> from NYTimes, where a political consultant shows just how powerful a good story can be. <\/p>\n<h2>Understand Information<\/h2>\n<\/p>\n<p>A simple web site will seem pretty straight forward but as the complexity ramps up, the <a href=\"05-information-architecture\/\" target=\"_blank\"  rel=\"noopener noreferrer\">information architecture<\/a> 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 <a href=\"https:\/\/www.nytimes.com\" target=\"_blank\"  rel=\"noopener noreferrer\">New York Times<\/a>.<\/p>\n<figure class=right-p>\n<img decoding=\"async\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/02-uxtreasuremap.gif\" alt=\"Treasure Map\" title=\"alt=\"Treasure Map PDF\" \"  \/><figcaption><a href=\"http:\/\/semanticstudios.com\/pdfs\/uxtreasuremap.pdf\" target=\"_blank\"  rel=\"noopener noreferrer\">treasure Map PFD<\/a><\/figcaption><\/figure>\n<\/p>\n<p>To manage the daunting amount of complexity, a process emerged to help manage it all. The treasure map is a list of <a href=\"http:\/\/semanticstudios.com\/user_experience_deliverables\/\" target=\"_blank\"  rel=\"noopener noreferrer\">user experience deliverables<\/a>: 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 to you but there are a lot of techniques to help you create and test the user experience.\n<\/p>\n<\/p>\n<p>Navigating the content is full of junctures where decisions are made. To prototype such decisions logical flowcharts are created called <a href=\"http:\/\/www.google.com\/search?q=User+Flows&#038;hl=en&#038;qscrl=1&#038;prmd=ivns&#038;tbm=isch&#038;tbo=u&#038;source=univ&#038;sa=X&#038;ei=WDX2TceRFcjr0gHR1sTsDA&#038;ved=0CDMQsAQ&#038;biw=1482&#038;bih=899\" target=\"_blank\"  rel=\"noopener noreferrer\">user flows<\/a>. It is impossible to design an information hierarchy with fully loaded with content, so designers strip the content away and use <a href=\"http:\/\/www.google.com\/search?hl=en&#038;qscrl=1&#038;biw=1482&#038;bih=920&#038;tbm=isch&#038;sa=1&#038;q=website+ux+wireframe&#038;oq=website+ux+wireframe&#038;aq=f&#038;aqi=g4&#038;aql=&#038;gs_sm=e&#038;gs_upl=7717l8202l0l4l3l0l0l0l0l161l423l0.3\" target=\"_blank\"  rel=\"noopener noreferrer\"> wireframes.<\/a>\n<\/p>\n<p>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.\n<\/p>\n<p>The goal of the wireframe is to structure the content so it&#8217;s understandable and easy to use. The CSS&#8217;s box model is ideally suited for developing an interactive wireframe but 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&#8217;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 first minutes count.\n<\/p>\n<p>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. An information architect would do the following: <\/p>\n<ol>\n<li>Write down and organize the site objectives.<\/li>\n<li>List the content requirements.<\/li>\n<li>Determine the appropriate page hierarchy for the site, be it top down or bottoms up.<\/li>\n<li>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.<\/li>\n<li>Standardize the navigation architecture with the organization of the content, and you are ready to create a complete diagram of the information architecture.<\/li>\n<li>Create a wireframe mockup from that diagram which will show the placement of the navigation elements in relation to the content of the site. <\/li>\n<\/ol>\n<h2>Test and Test Again<\/h2>\n<\/p>\n<p>All of this development does not happen in a vacuum. Mockups and prototypes are not enough. You have to build what you prototype and test it with real users, and test it, and test it until you know that it actually works.\n<\/p>\n<p>Everything has  to be user tested. How else can you learn that the user experience actually works?\n<\/p>\n<p>You can&#8217;t watch over someone&#8217;s shoulder to test user experience. Software packages like <a href=\"https:\/\/silverbackapp.com\" target=\"_blank\"  rel=\"noopener noreferrer\">silverback<\/a> can follow the user as they go through the website. This kind of feedback can be invaluable. You have the opportunity to use this software at the <a href=\"13-peer-review\/\" target=\"_blank\"  rel=\"noopener noreferrer\">middle and end<\/a> of the course, to test your portfolio and final  projects.\n<\/p>\n<p>Download a free version of <a href=\"http:\/\/silverback.s3.amazonaws.com\/silverback2.zip\" target=\"_blank\"  rel=\"noopener noreferrer\">Silverback 2.0<\/a> to test your website!<\/p>\n<h2>Strive for Simplicity<\/h2>\n<\/p>\n<p><strong>KIS!<\/strong> <strong>K<\/strong>eep <strong>I<\/strong>t <strong>S<\/strong>imple is the mantra. For emphasis, add a second \u201cS.\u201d <strong>KISS!<\/strong>\n<\/p>\n<p>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!<\/p>\n<h2>The Landing Page Critique<\/h2>\n<\/p>\n<p>If your landing page does not capture your audience, they will not go further, and you will have lost your chance to communicate. The landing page is a marketing campaign, not just a design problem.\n<\/p>\n<p>To help you along, Unbound has a <a href=\"http:\/\/unbounce.com\/lp-sessions\/all-episodes\/\" target=\"_blank\"  rel=\"noopener noreferrer\">number of videos<\/a> to make you think twice about how to put a landing page together. Take the time and watch their <a href=\"http:\/\/unbounce.com\/lp-sessions\/s1-episode1\/\" target=\"_blank\"  rel=\"noopener noreferrer\">constructive video critique<\/a>. It should help inspire you to do the right thing when it comes to your own landing page. <\/p>\n<h2 id=\"apple\" >Apple\u2019s User Experience Guidelines<\/h2>\n<\/p>\n<p>Apple&#8217;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.\n<\/p>\n<p>These are the devices including the MacOS, iOS, watchOS, and tvOS covered by Apple\u2019s<a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/\" target=\"_blank\"  rel=\"noopener noreferrer\">Human Interface Guidelines<\/a>. User experience revolves around streamlined interaction with content that people care about. Here are some points:<\/p>\n<ul>\n<li>Focus on the Primary Task\n<\/li>\n<li>Elevate the Content People Care About\n<\/li>\n<li>Think From the Top of the screen Down\n<\/li>\n<li>Give People a Logical Path to Follow\n<\/li>\n<li>Make Usage Easy and Obvious\n<\/li>\n<li>Strive to make your content instantly understandable to people,\n<\/li>\n<li>Make the main point of your content immediately apparent.\n<\/li>\n<li>Be consistent\n<\/li>\n<li>Use User-Centric Terminology\n<\/li>\n<li>Minimize the Effort Required for User Input\n<\/li>\n<li>Enable Collaboration and Connectedness\n<\/li>\n<li>Brand Appropriately\n<\/li>\n<li>For the best user experience, you want to quietly remind users of your identity.\n<\/li>\n<li>Avoid taking space away from the content people care about.\n<\/li>\n<li>Entice and Inform with a Well-Written Description\n<\/li>\n<li>Be sure to correct all spelling, grammatical, and punctuation errors.\n<\/li>\n<li>Keep all-capital words to a minimum.\n<\/li>\n<li>Be Succinct\n<\/li>\n<li>Think like a newspaper editor, and strive to convey information in a condensed, headline style.\n<\/li>\n<li>Give buttons short labels, or use well-understood symbols, so that people can tell what they do at a glance.\n<\/li>\n<li>Use Design Elements Consistently\n<\/li>\n<li>Consider Adding Physicality and Realism\n<\/li>\n<li>Use appropriate animation to further enhance realism in your application.\n<\/li>\n<li>Delight People with Stunning Graphics.\n<\/li>\n<li>Consider replicating the look of high-quality or precious materials.\n<\/li>\n<li>When appropriate, create high-resolution artwork.\n<\/li>\n<li>Make Targets Fingertip-Size\n<\/li>\n<li>Give tappable elements in your application a target area of about 44 x 44 points.\n<\/li>\n<li>Use Subtle Animation to Communicate\n<\/li>\n<li>Add animation cautiously\n<\/li>\n<li>Make animation consistent\n<\/li>\n<li>Restrain Your Information Hierarchy\n<\/li>\n<\/ul>\n<h2>Apple TV <\/h2>\n<\/p>\n<p>User Design experience adapts to whatever experience the device delivers. Apple has a clear explanation of the User Experience on <a href=\"https:\/\/developer.apple.com\/videos\/play\/techtalks-apple-tv\/2\/\" target=\"_blank\"  rel=\"noopener noreferrer\">Apple TV<\/a>. Watch it to see how to design for Apple TV. It is all about the living room experience and sitting at a distance across the room, unlike a desktop computer or an iPhone.   Platform design goals (principles) are to be (1) connected,  (2) clear and  (3) immersive. Good explanation and examples throughout. <\/p>\n<figure><img decoding=\"async\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/02-AppleTV.gif\" alt=\"Apple TV controls\" \/><figcaption>Apple TV button feedback<\/figcaption><\/figure>\n<h2>Apple Website <\/h2>\n<p>Apple\u2019s website has been one of the goto sites for design but look at its <a href=\"https:\/\/www.webdesignmuseum.org\/timeline\/apple-1997\" target=\"_blank\"  rel=\"noopener noreferrer\">early incarnations<\/a> and you realize how much it\u2019s changed. <\/p>\n<h2 id=\"google\" target=\"_blank\" > Google User Experience Manifesto<\/h2>\n<p>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&#8217;s <a href=\"http:\/\/www.google.com\/about\/corporate\/company\/ux.html\" target=\"_blank\"  rel=\"noopener noreferrer\">Googlification<\/a>, if that is a word. This is their user Experience manifesto.<\/p>\n<h3> Our aspirations <\/h3>\n<\/p>\n<p> The Google User Experience team aims to create designs that are <a href= \"#useful\" target=\"_blank\"  rel=\"noopener noreferrer\">useful<\/a>, <a href=\"#fast\" target=\"_blank\"  rel=\"noopener noreferrer\">fast<\/a>, <a href=\"#simple\" target=\"_blank\"  rel=\"noopener noreferrer\">simple<\/a>, <a href= \"#engaging\" target=\"_blank\"  rel=\"noopener noreferrer\">engaging<\/a>, <a href=\"#innovative\" target=\"_blank\"  rel=\"noopener noreferrer\">innovative<\/a>, <a href= \"#universal\" target=\"_blank\"  rel=\"noopener noreferrer\">universal<\/a>, <a href=\"#profitable\" target=\"_blank\"  rel=\"noopener noreferrer\">profitable<\/a>, <a href= \"#beautiful\" target=\"_blank\"  rel=\"noopener noreferrer\">beautiful<\/a>, <a href=\"#trustworthy\" target=\"_blank\"  rel=\"noopener noreferrer\">trustworthy<\/a>, and <a href= \"#personable\" target=\"_blank\"  rel=\"noopener noreferrer\">personable<\/a>. Achieving a harmonious balance of these ten principles is a constant challenge. A product that gets the balance right is \u201cGoogley\u201d \u2013 and will satisfy and delight people all over the world. <\/p>\n<h3> Ten principles that contribute to a <strong>Googley<\/strong> user experience <\/h3>\n<ol>\n<li id=\"useful\" target=\"_blank\" > <strong>Focus on people, their lives, their work, their dreams.<\/strong><br \/> The Google User Experience team works to discover people\u2018s actual needs, including needs they can\u2018t 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\u2018s lives, not just easing step-by-step tasks, is our goal.\n<p> Above all, a well-designed Google product is useful in daily life. It doesn\u2018t try to impress users with its whizbang technology or visual style \u2013 though it might have both. It doesn\u2018t strong-arm people to use features they don\u2018t want \u2013 but it does provide a natural growth path for those who are interested. It doesn\u2018t intrude on people\u2018s lives \u2013 but it does open doors for users who want to explore the world\u2018s information, work more quickly and creatively, and share ideas with their friends or the world. <\/p>\n<\/li>\n<li id=\"fast\" target=\"_blank\" > <strong>Every millisecond counts.<\/strong><br \/> Nothing is more valuable than people\u2018s 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.<br \/>\n<blockquote class=\"feature\" target=\"_blank\" ><p> Speed is a boon to users. It is also a competitive advantage that Google doesn\u2018t sacrifice without good reason. <\/p><\/blockquote>\n<\/li>\n<li id=\"simple\" target=\"_blank\" > <strong>Simplicity is powerful.<\/strong><br \/> 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\u2018s fundamental functions. Google doesn\u2018t 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.\n<p> 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. <\/p>\n<\/li>\n<li id=\"engaging\" target=\"_blank\" > <strong>Engage beginners and attract experts.<\/strong><br \/> Designing for many people doesn\u2018t 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.\n<p> 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\u2018s 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 \u2013 for instance, people who share data across several devices and computers, work online and off, and crave storage space. <\/p>\n<\/li>\n<li id=\"innovative\" target=\"_blank\" > <strong>Dare to innovate.<\/strong><br \/> 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.\n<p> 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. <\/p>\n<\/li>\n<li id=\"universal\" target=\"_blank\" > <strong>Design for the world.<\/strong><br \/> 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 \u201cgraceful degradation\u201d of a feature set, isn\u2018t sufficient to meet people\u2018s needs.\n<p> Google is also committed to improving the accessibility of its products. Our desire for simple and inclusive products, and Google\u2018s mission to make the world\u2018s 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. <\/p>\n<\/li>\n<li id=\"profitable\" target=\"_blank\" > <strong>Plan for today\u2019s and tomorrow\u2019s business.<\/strong><br \/> 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.\n<p> 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\u2018t please users, it\u2018s time to go back to the drawing board. Not every product has to make money, and none should be bad for business. <\/p>\n<\/li>\n<li id=\"beautiful\" target=\"_blank\" > <strong>Delight the eye without distracting the mind.<\/strong><br \/> If people looked at a Google product and said \u201dWow, that\u2018s beautiful!\u201d 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.\n<p> A minimalist aesthetic makes sense for most Google products because a clean, clutter-free design loads quickly and doesn\u2018t distract users from their goals. Visually appealing images, color, and fonts are balanced against the needs for speed, scannable text, and easy navigation. Still, \u201dsimple elegance\u201d is not the best fit for every product. Audience and cultural context matter. A Google product\u2018s visual design should please its users and improve usability for them. <\/p>\n<\/li>\n<li id=\"trustworthy\" target=\"_blank\" > <strong>Be worthy of people\u2019s trust.<\/strong><br \/> Good design can go a long way to earn the trust of the people who use Google products. Establishing Google\u2018s reliability starts with the basics \u2013 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.\n<p> A greater challenge is to make sure that Google demonstrates respect for users\u2019 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 \u201cDon\u2018t be evil\u201d motto. <\/p>\n<\/li>\n<li id=\"personable\" target=\"_blank\" > <strong>Add a human touch.<\/strong><br \/> Google includes a wide range of personalities, and our designs have personality, too. Text and design elements are friendly, quirky, and smart \u2013 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\u2018t let fun or personality interfere with other elements of a design, especially when people\u2018s livelihood, or their ability to find vital information, is at stake.\n<p> Google doesn\u2018t 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. <\/p>\n<\/li>\n<\/ol>\n<h2>Is UX For You?<\/h2>\n<p>A compendium of insight, resources, instruction, and wisdom for anyone who wishes to know more, or get an overview of XU as a career. <a href=\"https:\/\/start.uxdesign.cc\" target=\"_blank\"  rel=\"noopener noreferrer\"> The Ultimate UX Guide With All  The Secrets You Need  To  Know <\/a><\/p>\n<h2>UX Crash Course: 31 Fundamentals<\/h2>\n<\/p>\n<p>want to learn more? Joel March has put together what 31 fundamentals.  They are short and to the point, and an illustration of his <a href=\"http:\/\/thehipperelement.com\/post\/98141670152\/the-ux-perspective\" target=\"_blank\"  rel=\"noopener noreferrer\"> XU Perspective<\/a> in which everything rotates around XU.\n<\/p>\n<p>Introduction &#038; Key Ideas\n<\/p>\n<p>#01 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/71886924188\/daily-ux-crash-course-1-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/71886924188\/daily-ux-crash-course-1-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">What is UX?<\/a>\n<\/p>\n<p>#02 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/71993245690\/daily-ux-crash-course-2-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/71993245690\/daily-ux-crash-course-2-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">User Goals &#038; Business Goals<\/a>\n<\/p>\n<p>#03 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72080847673\/daily-ux-crash-course-3-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72080847673\/daily-ux-crash-course-3-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">The 5 Main Ingredients of UX<\/a>\n<\/p>\n<p>****\n<\/p>\n<p>How to Understand Users\n<\/p>\n<p>#04 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72215356367\/daily-ux-crash-course-4-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72215356367\/daily-ux-crash-course-4-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">What is User Research?<\/a>\n<\/p>\n<p>#05 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72332896118\/daily-ux-crash-course-5-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72332896118\/daily-ux-crash-course-5-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">How to Ask People Questions<\/a>\n<\/p>\n<p>#06 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72447829343\/daily-ux-crash-course-6-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72447829343\/daily-ux-crash-course-6-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Creating User Profiles<\/a>\n<\/p>\n<p>#07 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72554568719\/daily-ux-crash-course-7-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72554568719\/daily-ux-crash-course-7-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Designing for Devices<\/a>\n<\/p>\n<p>#08 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72691840090\/daily-ux-crash-course-8-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72691840090\/daily-ux-crash-course-8-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Design Patterns<\/a>\n<\/p>\n<p>****\n<\/p>\n<p>Information Architecture\n<\/p>\n<p>#09 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72756966184\/daily-ux-crash-course-9-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72756966184\/daily-ux-crash-course-9-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">What is Information Architecture?<\/a>\n<\/p>\n<p>#10 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72874272820\/daily-ux-crash-course-10-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72874272820\/daily-ux-crash-course-10-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">User Stories &#038; Types of Information Architecture<\/a>\n<\/p>\n<p>#11 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/72968482991\/daily-ux-crash-course-11-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/72968482991\/daily-ux-crash-course-11-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">What is a Wireframe?<\/a>\n<\/p>\n<p>****\n<\/p>\n<p>Visual Design Principles\n<\/p>\n<p>#12 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73103991460\/daily-ux-crash-course-12-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73103991460\/daily-ux-crash-course-12-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Visual Weight, Contrast &#038; Depth<\/a>\n<\/p>\n<p>#13 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73203177934\/daily-ux-crash-course-13-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73203177934\/daily-ux-crash-course-13-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Colour<\/a>\n<\/p>\n<p>#14 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73305160526\/daily-ux-crash-course-14-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73305160526\/daily-ux-crash-course-14-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Repetition &#038; Pattern-Breaking<\/a>\n<\/p>\n<p>#15 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73407681027\/daily-ux-crash-course-15-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73407681027\/daily-ux-crash-course-15-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Line Tension &#038; Edge Tension<\/a>\n<\/p>\n<p>#16 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73500942856\/daily-ux-crash-course-16-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73500942856\/daily-ux-crash-course-16-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Alignment &#038; Proximity<\/a>\n<\/p>\n<p>****\n<\/p>\n<p>Functional Layout Design\n<\/p>\n<p>#17 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73602783776\/daily-ux-crash-course-17-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73602783776\/daily-ux-crash-course-17-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Z-Pattern, F-Pattern, and Visual Hierarchy<\/a>\n<\/p>\n<p>#18 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73712940731\/daily-ux-crash-course-18-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73712940731\/daily-ux-crash-course-18-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Browsing vs. Searching vs. Discovery<\/a>\n<\/p>\n<p>#19 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73855592557\/daily-ux-crash-course-19-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73855592557\/daily-ux-crash-course-19-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Page Framework<\/a>\n<\/p>\n<p>#20 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/73940726216\/daily-ux-crash-course-20-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/73940726216\/daily-ux-crash-course-20-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">The Fold, Images, &#038; Headlines<\/a>\n<\/p>\n<p>#21 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74055298728\/daily-ux-crash-course-21-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74055298728\/daily-ux-crash-course-21-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">The Axis of Interaction<\/a>\n<\/p>\n<p>#22 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74185784131\/daily-ux-crash-course-22-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74185784131\/daily-ux-crash-course-22-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Forms<\/a>\n<\/p>\n<p>#23 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74283917353\/daily-ux-crash-course-23-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74283917353\/daily-ux-crash-course-23-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Calls-to-Action, Instructions &#038; Labels<\/a>\n<\/p>\n<p>#24 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74379404110\/daily-ux-crash-course-24-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74379404110\/daily-ux-crash-course-24-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Primary &#038; Secondary Buttons<\/a>\n<\/p>\n<p>****\n<\/p>\n<p>User Psychology\n<\/p>\n<p>#25 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74504954492\/daily-ux-crash-course-25-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74504954492\/daily-ux-crash-course-25-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Conditioning<\/a>\n<\/p>\n<p>#26 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74607165637\/daily-ux-crash-course-26-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74607165637\/daily-ux-crash-course-26-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Persuasion<\/a>\n<\/p>\n<p>#27 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74722147650\/daily-ux-crash-course-27-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74722147650\/daily-ux-crash-course-27-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">How Experience Changes Experience<\/a>\n<\/p>\n<p>****\n<\/p>\n<p>Designing with Data\n<\/p>\n<p>#28 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74829065240\/daily-ux-crash-course-28-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74829065240\/daily-ux-crash-course-28-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">What is Data?<\/a>\n<\/p>\n<p>#29 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/74956500991\/daily-ux-crash-course-29-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/74956500991\/daily-ux-crash-course-29-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Summary Statistics<\/a>\n<\/p>\n<p>#30 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/75069453398\/daily-ux-crash-course-30-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/75069453398\/daily-ux-crash-course-30-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">Graph Shapes<\/a>\n<\/p>\n<p>#31 \u2014<a href=\"http:\/\/thehipperelement.com\/post\/75153953163\/daily-ux-crash-course-31-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\"> <\/a><a href=\"http:\/\/thehipperelement.com\/post\/75153953163\/daily-ux-crash-course-31-of-31\" target=\"_blank\"  rel=\"noopener noreferrer\">A\/B Tests<\/a><\/p>\n<p class=\"c2 c4\" target=\"_blank\" >\n<p><\/srong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UX Design in a nutshell Two video shorts made by ADDIKT to describe the roll of the UX designer. ILUVUXDESIGN part I from lyle on Vimeo. ILUVUXDESIGN part II from lyle on Vimeo. User eXperience User Experience means making every &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/02-ux\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/100"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":44,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":5874,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/100\/revisions\/5874"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}