Interactive Media Design

1. Interactive Media Design

2. What is good “web-design”? • In one moment a user can figure out the name and purpose of a site (after landing there from a Google search result).

3. Each moment is important… because the task a person is attempting to complete at any given moment is the most important task to that person at that moment. • (So, ask yourself, what do you want them to accomplish.) • Therefore, your job is to create moments, not screens! EX.

4. Agree or Disagree?! • “Usability and utility, not visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.” - Smashingmag.com

5. The “f” pattern. • Implications: • Users won’t read your text thoroughly. • The first two paragraphs must state the most important info. • Start subheads, paragraphs, and bulleted lists with information-carrying words.

6. The “30 Second” Rule • Within a users first 30 seconds you need to: present an appealing first impression, create clear pathways to information, offer tools to help the user get oriented, compel the explorer to become a customer. • Our job when we’re on an unfamiliar Web page is to scan the page and try to figure out what the site is about, decide whether or not we want to stick around and check things out more thoroughly, and determine how to get around within this space.

7. What to do with the “30” seconds? • Decide the kind of imprint do you want to leave? • The actions users take online are broad and varied. • We do things like input, edit, search, format, create, upload, delete, share, participate, etc. These are the actions designers want users to take… of course, we also do things we don’t usually realize we’re doing. We analyze. We judge. We forget, make mistakes, lose our train of thought, change our minds, get lost, become confused, etc. If we’re lucky we learning things. We get oriented. We form ideas, memorize, habituate, trust, get inspire, and feel productive.

8. First Impressions • First impressions are essential = what is your main goal!

9. First Impression: basics • 1. Establish your main goal • 2. Get all the requirements and content nailed down • 3. Plan the layout - throw a bunch of boxes on the screen and then move them around (see how they fit and what they do/create)

10. Layout • Gutenberg Rule: POA - TA (primary optical area vs. terminal anchor) Diagonal balance doesn’t work on every site/page so don’t force it.

11. Color is a fantastic way to draw the eye to specific elements – especially when color contrasts the other elements of the page.

12. Type • Use type and characters (various types) to create stylistics trends for your site that unify it. • Your goal should be to create and get across a specific vibe we want to get across to users. However, keep your brand marks subtle and elegant (error on the side of simplicity.) • Headings should create contrast and hierarchy = larger serif font, vs. small sans serif font for body.

13. Website: Navigation • Users will look at major page sections for something relevant, then at items within sections for something more relevant, and eventually – hopefully at the exact thing we’re seeking • For this reason IT IS absolutely vital that navigation, makes sense (i.e., menu options need to reflect their natural relationships – label accordingly.) • Navigations need to make the user feel like they are in charge (i.e., think Adobe product menus: everything is TASK based, do the same.)

14. Website Perfection • Ensure that everything is correct (layout, colors, working buttons, copy, etc.) says and communicates: “I care. 100 percent. All the way.” • (Side note: Copy is every bit as important as everything else in an interface. In most cases, it’s all our users have to rely on. Text can explain the purpose, benefit, and usage of a page, or it can confuse a user to not end, leaving her to guess and potential make a mistake, for which they’ll blame themself.)

15. Scanning vs. Reading • That being said, people don’t generally read the text on a webpage—they scan it. Long intro text usually always gets ignored. When we do read, or actually take the time to scan, we look for obvious clues about what the site is for, how it works, and what we need to do to start being productive; we are thinking about doing, not reading.” - - - so use phrases that are “call-to-action” phrases, used to inspire people to take action (yes, a lot of readers do happen to be sheep). Basically tell them to “Go to their room!” ie) read more, sign-in // these make things more scannable.

16. Text vs. Images vs. Video • Images are worth 1000 words, but video is worth 10000 words (also what are the words you want them to get out of it? Be careful and cleaver). Use video to communicate something that is easier heard than read.

17. how OLD is the internet? • Show the age of a page! (Don’t you think it’s strange that the web doesn’t show age – does that bother you?!) – for usability reasons it should!

18. Ambient Signifiers • Website design should include “ambient signifiers” = allowing users to accomplish a task on a site almost subconsciously. (ex. Bigger and bolder to smaller and less bold on article sites.)

19. Types of Sites • Types of sites: portfolio, ecommerce, educational, … blogs • Blogs: most people stick around just long enough to read a post, and then they’re outta there. • Blogs = should make it easier for uses to scan a page to determine whether or not the post is worth reading. • First sentences should reveal high-level information that tells readers what the story is about. • Blogs should encourage conversation. • Blogs should offer trackbacks (snippets from articles that appar on a post page, aggregated from other sites that reference the post = creating validity, or somekind of ethos). • BLogs should have author name, and DATE. And of course, an RSS feed. • But make sure you say subscribe, because most people don’t know what RSS is or how it works. Maybe include addthis.com to help subscription.

20. Pagination Interface • Use hierarchy, show which page is currently on (i.e., gray out) • Have working sensible arrows • Make links “clickable” • Be aware of (and probably use) convention sets (i.e., google search results) • ***If you are going to challenge standards, the goal is to improve upon them. • A USER SHOULD NEVEr have to rely on browser buttons (site navigation should always offer a way for users to get to and fro without other tools). • Use a “browserless self-test)

21. Buttons • Note the use of primary and secondary buttons (i.e., register and cancel = do they need to look the same? No. In fact better if they don’t.) • Clarity is more important than efficiency (in fact, clarity will induce efficiency).

22. Website Features • Be wary of featuritis = disease of poor usability caused by the inclusion of far too many features. • Clouds and Tags: I have noticed more and more sites including taxonomies and or folksonomies = what are they and what is the difference. How do tags fit within this discussion? • Document-modal is a type of progressive disclosure: a way of progressively revealing features based on how common or necessary they are. (ie. Fade out background and make it inactive.)

23. 10 more quick rules-of-thumb: • 1. Don’t make users think. • 2. Don’t squander users’ patience. • 3. Focus users attention. • 4. Strive for feature exposure. • 5. Make use of effective writing. • 6. Strive for simplicity. • 7. Don’t be afraid of white space. • 8. Communicate effectively with a “visible language.” • 9. Conventions are our friends. • 10. Test early, test often.

24. Don’t make users think. • Web-page should be obvious and self-explanatory (get rid of the question marks = have intuitive site architecture, and reduce the cognitive load.) • Web users are impatient and insist on instant gratification (they’ll leave and look for something else). • Users don’t make optimal choices (they choose the first reasonable option). • Users want to have control (i.e., they don’t want popups, they want clear navigation that doesn’t require guess work, etc.)

25. Don’t squander users’ patience. • Ideally remove all barriers; don’t require subscriptions or registrations first. • Keep your user requirements minimal. • Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

26. Focus Users Attention • Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. • The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. • In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

27. Strive for Feature Exposure • Guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. is really helpful/effective Web2.0 interactive media design. • Letting the user see clearly what functions are available is a fundamental principle of successful user interface design.

28. Make Use of Effective Writing • Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored. • Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”. • Use short and concise phrases (come to the point as quickly as possible), • Use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks), • Use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

29. Strive for Simplicity • KIS = Keep it Simple (less is more) • Users are not there to enjoy the design - they are looking for information (strive for simplicity instead of complexity.) • Clearly present the information about the site and give visitors a choice of options without overcrowding them with unnecessary content.

30. Don’t be Afraid of White Space • White space reduces the cognitive load on users. • Increases usability by clarifying readability (scanability). • If you have to choose between using lines or space to organize, use space.

31. Communicate effectively with a “visible language.” • Organize: Consistentrelationships and navigability. • Economize: do the most with the least amount of cues and visual elements. Simplicity = only important elements. Clarity: everything has a meaning and is not ambiguous. Distinctiveness: important elements are distinguishable. Emphasis: the most important elements should be easily perceived. • Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

32. Conventions are our friends • They reduce the learning curve. • Gain users trust, confidence, and show your reliability and credibility. • Follow user expectations. • Only innovate when your idea improves upon conventions.

33. Test early, test often. • Testing at least one user is better than testing none. And testing early is better than late (formative feedback). • Design is an iterative process. • Usability tests always produce useful results. • Developer is unsuited to test his or her own stuff. • gaw example of Rhino photography.

34. Final Note • Remember = the design of interaction itself needs to leave users feeling productive, respected, and smart. • Finally, sadly not everyone will love your/our work, no matter how good it is. (e.x., 100th top visited site in the U.S.)