USER EXPERIENCE / UX the element

1. USER EXPERIENCE / UXthe element Ivan Diryana @ivandiryana/ ivandiryana.com MBTI 2012

2. Everyday Misery • everyone, every once in a while, has one of those days / bad day • the accident (drivers turn down radio volume) • the cash register (complex and confusing makes long queue) • the pump (wont accept your credit card cause you put it other way to swipe it) • the coffeemaker didn’t make coffee because you didn’t push the button all the way • the alarm didn'twork as suppose to as it reset easily

3. User Experience and Why it Matters • From Product Design to User Experience Design (people often misunderstood with aesthetic appeal) • It means looking beyond functional and aesthetics • Ex: aesthetic design of coffeemaker button have appealing shape and texture, functional design makes sure it triggers the appropriate action, user experience design make sure the aesthetic and functional aspect of the button work in the context of rest of the product, like is the button big enough for such an important task or is it located in good position compared to other button

4. User Experience and Why it Matters • Designing (for) Experiences : Use Matters • User Experiences and the Web • Most people will blame themselves when they can operate, they feel stupid or is not paying enough attention or feel have done something wrong. After all is not their fault the site doesn’t work. They feel stupid anyway and this will drive people away. • To measure how succesfull and ROI of your website use : conversion rate • Good User Experience is Good Business (if your website is difficult to understand , probably your company as well) • Features and function always matter, but user experience has far greater effect on customer loyalty

5. Conversion Rate

6. Five Planes • Building from Bottom to Top • On each plane we deal with a little less abstract and little more concrete • On the lowest plane, we are not concerned with final shape of the site, product or service • On the highest plane, we are only concerned with the most concrete details of the appearance of the product.

8. dependencies run on both direction based on industry best practice, at each level we make decision according to what the competition doing • ripple effect above is for dynamics projects. • plan the project so that the work on any plane cannot finish before work on lower planes has finished

9. Basic Duality • application function : e-commerce, social media, financial services and anything that attract commercial interest on the web • as an source of information is what web originally created for • on the functionality side, concern mainly on task – the steps involved in a process and how people think about completing them. we consider the product as a tools for user to accomplish the task • on the information side, concern is what information the product offers and what it means to users. creating an information rich user experience is to make people find, absorb and make sense the providing information

10. Elements of User Experience • Strategy Plane • User Needs (for both function) • Product Objectives (for both function) • Scope Plane • Function Specification (a detailed description of product feature) • Content Requirement (description of various content elements that will be required) • Structure Plane • Interaction Design (how system behave in response to user) • Information Architecture (the arrangement of content elements to facilitate human understanding)

11. Elements of User Experience • Skeleton Plane • Information Design – on both side (presentation of information in a way that facilitate understanding) • Interface Design (arranging interface elements to enable users to interact with the functionality of the system) • Navigation Design (set of screen element that allow user to move through the information architecture) • Surface Plane • Sensory Experience – on both side

12. Strategy Plane

13. Scope Plane On the functionality side, we’re concerned with what would be considered the feature set of the software product. On the information side, we’re dealing with content, the traditional domain of editorial and marketing communications groups.

14. In software development, the scope is defined through functional requirements or functional specifications. • A content developer will sit down and talk with people or pore over source material, whether that be a database or a drawer full of news clippings, in order to determine what information needs to be included in the content she’s developing. This process for defining content requirements

15. Functional Specifications Writing It Down • Be positive • The system will not allow the user to purchase a kite without kite string. • The system will direct the user to the kite string page if the user tries to buy a kite without string.

16. Be specific • Compare these examples: 1. The most popular videos will be highlighted. 2. Videos with the most views in the last week will appear at the top of the list.

17. Avoid subjective language • The site will have a hip, flashy style. • The site will meet the hipness expectations of Wayne, the mail clerk • The look of the site will conform to the company branding guidelines document.

18. Content Requirements • Identifying all the content types associated with a feature can help you determine what resources will be needed to produce the content (or whether it can be produced at all). • The expected size of each of your content features has a huge influence on the user experience decisions you will have to make.

19. It’s important to identify who will be responsible for each content element as early as possible. • for every content feature, you should identify how frequently it will be updated. The frequency of updates should be derived from your strategic goals for the site:

20. Structure Plane the discipline involved in creating a structured experience for the user is known as interaction design. In content development, structuring the user experience is a question of information architecture.

21. Interaction Design • Interaction design is concerned with describing possible user behavior and defining how the system will accommodate and respond to that behavior. • conceptual models  Users’ impressions of how the interactive components we create will behave • For example, the conceptual model for the shopping cart component of a typical e-commerce site is that of a container. • influences both the design of the component and the language we use in the interface. • “put things into” and “take things out of” the “cart,”  the system must provide functions to accomplish these tasks.

23. Structure Plane

24. Information Architecture • how to structure the information so other people can understand and use it. • Structuring Content • On content sites, information architecture is concerned with creating organizational and navigational schemes that allow users to move through site content efficiently and effectively

27. Structure Plane

28. Skeleton Plane

29. Interface Design • Interface design is all about selecting the right interface elements for the task the user is trying to accomplish and arranging them on the screen in a way that will be readily understood and easily used. • Successful interfaces  users immediately notice the important stuff. Unimportant stuff, , doesn’t get noticed—sometimes because it’s not there at all.

32. Navigation Design • The navigation design of any site must accomplish three simultaneous goals: • First, it must provide users with a means for getting from one point to another on the site. • Second, the navigation design must communicate the relationship between the elements it contains. • Third, the navigation design must communicate the relationship between its contents and the page the user is currently viewing.

36. Information Design • Information design  making decisions about how to present information so that people can use it or understand it more easily. • Sometimes information design is visual. • binoculars icon • Sometimes information design involves grouping or arranging pieces of information.

38. The key --> Group and arrange the information elements in a way that reflects how your users think and supports their tasks and goals. • Information design plays a role in interface design problems • not only gather information from the user, but communicate information to the user as well

39. Wayfinding • Helping people understand where they are and where they can go. • typically involves both navigation design and information design. • Communicate choices clearly • Good wayfinding enables users to quickly get a mental picture of where they are, where they can go, and which choices will get them closer to their objectives.

40. Wireframes • Page layout is where information design, interface design, and navigation design come together to form a unified, cohesive skeleton.

42. THE SURFACE PLANE

43. Smell and Taste  rarely considered except food • Touch  Industrial design • Hearing  plays a role in the experience of many kinds of products. • Vision  experience designers have the most sophistication, because visual design plays a role in virtually every kind of product there is • It’s not just a matter of aesthetics, it’s a matter of strategy

50. book source