PowerPoint Presentation

Usability and UX125/11/2015

What is Design, UX, Usability, UI?Design could be viewed as an activity that translates an idea into a blueprint for something useful, whether it's a car, a building, a graphic, a service or a process.Usability is about ease of use: a highly usable product enables the user to achieve their goals quickly, with minimum fuss or frustration and without error. (Simple, Usable, Easy to learn, consistent)User experience includes usability, but also encompasses a more emotional dimension. (PET)

In today world we are hearing lot of words like design, usability, user experience, interaction design, IA and mostly interchangeably.Are they same or different. In what context they exist.

Design:The important part is the translation of the idea, though design's ability to spark the idea in the first place shouldn't be overlooked.It comes from field of Arts, Science, Psychology, AnthropologyUX:: for example, the desire, joy, meaning, reflection, value or frustration that a user experiences. (IPhone PET)

http://semanticstudios.com/publications/semantics/000029.phphttp://www.mech.hku.hk/bse/interdisciplinary/what_is_design.pdf

225/11/2015Learning by pictures

Management think usability (or design) is fix or lipstick.It is an overall design strategy if you really care about design. The DNA of product life cycle.What is design?Alex WhiteTo design means to plan. The process of design is used to bring order from chaos and randomness.

Victor PapanekDesign is the conscious effort to impose meaningful order.

Douglas Martin (Book design: A practical Introduction)Questions about whether design is necessary or affordable are quite beside the point: Design is INEVITABLE. The alternative to good design is bad design, not no design at all.

Design as quote by some thinkers425/11/2015

How to start, Where to start, Who can start and What is in for me?Who can contributeProduct ManagerDesignerTestingDeveloperWhere to startDesign StrategyDesign ProcessDesign methodsDesign principlesDesign guidelinesTools----

How to start?Leave it all, lets invert the pyramid and start such that every one can get started and contribute. (The low hanging fruits)Creation of design DNA.

For starters or people who want to adapt design in their working and have lot of question to be answered.525/11/2015

What is IxD, IA, ID, Visual Design?

Going inside the elements of design. Important to understand it.Jesse James GarretBottom to top (How product is developed)The divide between content(Newspaper) and task oriented(Control room solution) Divide is reducing and it is becoming one (Travel apps).625/11/2015The Five Layers of User Experience

Surface PlaneSkeleton PlaneStructure PlaneScope PlaneStrategy PlaneUser need, goals.Business goals.Bob(Persona) wants a home where he can peacefully live with his mother, wife and 2 children. He has limited saving and has taken loan to build his home.Bob has two cars.His mother is not in good health and loves nature and likes to spend time sitting outside the house and watching trees and birds.His elder son is in college and is enrolled to gym but he has to miss it sometimes as he has to assist his professor to support is education. His younger daughter is in music and want to become a professional singer. It will come from Contextual Interview and observationDistinguish Need from wantFind User goal, need, intent, insight, breakdown, current way of working, constraints, failures, frustration (Most are not direct or explicit)

E.g. For ease of understanding I take example of building of a homeNeed of BobSome is insight

725/11/2015The Five Layers of User Experience Surface PlaneSkeleton PlaneStructure PlaneScope PlaneFeatures, functions.Services, facilities.Content.Strategy Plane

The house should have atleast 3 bed rooms and single floor.There should be space inside the house to park two cars.There should be porch and it should be covered.There should be big room which can accommodate gym and space for music equipments.From need we are deriving design opportunity, ideas, insight and converting them in features.

Mother is not in good health so covered porch is neededThe boy need space for gym and the girl need some place where she can practice regularly.

825/11/2015The Five Layers of User Experience Surface PlaneSkeleton PlaneStructure PlaneIA: Organize content into logical hierarchies and categories. IxD: User workflow to achieve goal.Scope PlaneStrategy Plane

IA: Information ArchitectureIxD: Interaction Design

Now we are moving from the phase of concept to desgin.925/11/2015The Five Layers of User Experience

IA: The layout of the house to match the user need. IxD: The house provide different functions (for interaction) for every one in the family to accomplish their needs. E.G. The daughter can practice her music for hours without disturbing others.Putting the content in right hierarchy to meet user need

1025/11/2015The Five Layers of User Experience Surface PlaneSkeleton PlaneNavigation design: Where you are right know, where you can go from here, where did you come from.Information design: Layout, placements.Interface design: Widgets, controls.Structure PlaneScope PlaneStrategy Plane

The Five Layers of User Experience

Navigation design: Where family members can go from a room and how they can reach that room.E.g. Kitchen1225/11/2015The Five Layers of User Experience

Information design: How the items in this bedroom will be placed? Like the bed, chairs, almirah, Lamp etc.Interface design: The items in this bedroom and their functions to support the required placement. Like the bed (Will have drawers) ,chairs, almirah, Lamp etc.From the whole building to design individual rooms.1325/11/2015The Five Layers of User Experience Surface PlaneVisual design: Colour, Touch, Text Images, Look.Skeleton PlaneStructure PlaneScope PlaneStrategy Plane

The Five Layers of User Experience

Visual design: The color, look, touch of the items in this bedroom. Like bed will be glossy in touch for smoothness, will be round around edges and will have yellow and white color.

For DeveloperHow to eliminate the common design blunders while developmentGUI ControlUsing the wrong controlMutually exclusive checkboxes.Using controls wronglyDynamic menus.NavigationTextualLayout and WindowsVisualInteractionResponsive

We are creating a document for developer which will help them to learn and eliminate the design blunders they introduce while development.The document will be more detailed with examples as image.1625/11/2015Mutually exclusive checkboxes

Checkbox used as radio buttonDeveloper for visual consistency has not used radio button instead of check boxes1725/11/2015

For DeveloperHow to eliminate the common design blunders while developmentGUI ControlUsing the wrong controlMutually exclusive checkboxes.Using controls wronglyDynamic menus.NavigationTextualLayout and WindowsVisualInteractionResponsive

1825/11/2015Dynamic menus

GUI developers sometimes try to reduce the size and complexity of menu-bar menus by adding and removing items based on the state of the application. Commands are shown in the menus only when they are applicable. This may seem helpful, but it isnt. It confuses users: if they scan the menus at different times, they will find different menu items. 1925/11/2015

For Testing

Heuristic are 10 most general principles for interaction design. They are more in the nature of rules of thumb than specific usability guidelines.No. of evaluator find problem and provide severity ratings.The severity of a usability problem is a combination of three factors:Thefrequencywith which the problem occurs: Is it common or rare?Theimpactof the problem if it occurs: Will it be easy or difficult for the users to overcome?Thepersistenceof the problem: Is it a one-time problem that users can overcome once they know about it or will users repeatedly be bothered by the problem?

A heuristic evaluation with four evaluators would cost $6,400 and would find usability problems worth $395,000.For testing we are developing list heuristic, on the basis of this checklist tester can find the usability bugs.

It is a good method of identifying both major and minor problems with an interface.

Finally, of course, one needs to assess themarket impactof the problem since certain usability problems can have a devastating effect on the popularity of a product, even if they are "objectively" quite easy to overcome.

http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

2025/11/2015Ten Heuristics Visibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of use Aesthetic and minimalist designHelp users recognize, diagnose, and recover from errorsHelp and documentationJokab Nielson2125/11/2015

http://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

2225/11/2015

Here product guidelines comes into playEase of learning2325/11/2015Product ManagerPM: Market Information, User Need and Goal, Persona, Scenario of use.Need-Goal-Intent-Insight-ConstraintProblem statement-Design Opportunity-Design IdeasBrainstormPrototypeTest-FeedbackAgileWho: Your persona (Refine the backlog to give priority to your primary persona).What: Need, Goal of user or design opportunities.Why: Insight or learning you discovered about your user.How: To-be scenario of the product.

How PM can greatly contribute

Provide Need-Goal-Intent-Insight-Constraint of userOn the basis of that, problem statement can be made crystal clearDesign Opportunity-Design Ideas can be generatedBrainstorm to generate solutionCreate PrototypeTest with user Gather Feedback

Help in agileProvide user stories

2425/11/2015PersonaBill Cosby (US Comedian)I dont know the key to success but the key to failure is trying to please everybody.

Why we need Persona?Users become real people, with real needs and behaviours. This reduces the likelihood that you will arbitrarily introduce unrealistic features or behaviours into your product.Personas help you align product decisions to a specific person and behaviours. They can also help resolve disagreements around features by asking Would our persona really behave like this?.Personas help you communicate the reasons behind your design decisions to stakeholders.

Meet Mike Control Room Operator2625/11/2015

Meet Mike Control Room OperatorPersonal background:Michael (Mike), age 38Location: Lives in a rural residential area nearby his home town.Status: Has a relationship with a girl he met in a pub a while back.Hobbies: Loves football, particularly Manchester United never misses a match; also plays in a team of friends on occasion for the fun of it and the beers after, not so much for its sportive character. Mike is well integrated into his local community, e.g. member of a volunteer fire company.Professional background:Education: Electronics technician.Started professional training right after school, still works for the same company he was trained at.Initially a field agent, he was later asked to join the control center.

Information provided by Uwe Pfizenmaier (PM Network Division)Meet Mike Control Room OperatorTasks:Taking calls/reports from the field, most communication via phone or radio.Monitoring information on the wall and his desktop using various tools, only very occasionally interacts with the wall (or asks supervisor to do so).Logging incidents, documenting actions.Responding to events as quickly as possible; has rigid steps to follow.Sharing information, escalating events to supervisor as needed.Likes/Dislikes:Not very computer savvy as he never really learned it; sometimes still rather prefers books and paper over computer based tools.Although it can be boring, he likes monitoring what's happening on the wall as he still finds it the technology fascinating and cool; he also fancies a chat with his former colleagues in the field.Doesnt like to work in shifts as it complicates his leisure time, but he came to terms with it and learned to make the best of it.

Information provided by Uwe Pfizenmaier (PM Network Division)Meet Mike Control Room OperatorGoals/Motivation:Not very ambitious, knows that he's currently doing fine in his job and that's enough for him.Wants to avoid too much hassle.People on the floor and in the fields as well as the spacy environment motivate him.Likes to share his knowledge and experience.Challenges:Workflows and technology that are difficult to understand and use.Too many different tools can be irritating.

Information provided by Uwe Pfizenmaier (PM Network Division)Meet Mike Control Room OperatorQuotes:I loved to work in the field, but its also great to be part of the control room group. I still get to talk a lot with my old folks.Its a job of extremes: sometimes nothing exciting really happens for days and weeks, but then you suddenly have to do the right steps in just seconds.Sometimes I feel a little overwhelmed by all this modern technology around me. But its pretty cool, too.

User type:NoviceInter-mediateExpertFrequency:DailyWeeklyMonthlyYearlyOnceInteraction:ActivePassiveInformation provided by Uwe Pfizenmaier (PM Network Division)Personas combined with scenarios help you tell the story of your productwho will use it, when, how and most importantly, why.

3025/11/2015For DesignerMassimo Vignelli quotes HelveticaThe life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is cure it somehow with design.

Debbie Millman (How to think like a great graphic designer)Many of the designer in this book describe design as problem solving activity, yet it's clear that these designers do far more than that. Despite the obvious similarities, there is on trait shared by each and every person in this group of designers: high level of empathy.

Design InfluenceMicrosoftBauhaus movementInternational Typographic Style(or Swiss Style)Motion design (the force of timethe way we experience the world).

I will ask every designer before starting, go look outside in other people works, you will learn a lotSpend time consuming before you begin creating.

Microsoft Modern design is greatly influenced by3225/11/2015Bauhaus movementFocus on making the function beautiful is the first influence. At the heart of the Bauhaus philosophy is stripping away superfluous decorations to focus on the essence of the functional.Radical reductionism to the core functionElimination of superfluous additionsBeauty esteemed through simplicity

Bauhaus was a school in Germany that combined crafts and the fine arts, and was famous for the approach to design that it publicized and taught. It operated from 1919 to 1933

Reduction to formContent before chrome: Microsoft with Windows 8Defer to content: Apple with ios7Content is king: Google3325/11/2015International Typographic Style(or Swiss Style)

Emphasizes cleanliness, readability and objectivity. Great typography, a focus on layout and grid systems, and the use of bold, flat color. Seen in way-finding signage at airports and other transportation hubs.

From this style they have taken the necessity of a grid, both typographic and visual, and the use of asymmetric layouts in a principled and beautiful way.

Microsoft says:Transportation hub are by their nature busy and information-dense environments hence why it works so well in our busy, digital world. When this approach is infused with the things people love (their photos, their people, their apps), you end up with something as personal and unique as Windows.

3425/11/2015Motion designSaul Bass used great graphic design, typography and motion to create title sequences that set an emotional stage for films. Designers understood that not only could motion support those activities, it could also aid usability, it helps explain how a thing is accomplished.Great motion design not only adds delight and create a positive emotional impact, but also explains and educates with its subtle and intuitive designs.

Some examples that are coolNorth by Northwest http://bit.ly/hZ9A2hCatch me if you can http://bit.ly/cWtjxEGeneral http://bit.ly/rgb52M

Text, Image, Color in motion with sound. Great and meaningful animation

Title sequences3525/11/2015Design InspirationSpend time consuming before you begin creating.Inspiration in your products or others.Jim Jarmusch quote:"Nothing is original. Steal from anywhere that resonates or fuels your imagination. Devour old films, new films, music, books, paintings, photographs, poems, dreams, random conversation, architecture, bridges, street sign, trees, clouds, bodies of waters, light and shadows. Select only things to steal from that speak directly to your soul. If you do this, your work (and theft) will be authentic. Authenticity is invaluable; originality is non-existent. And dont bother concealing your thievery - celebrate it if you feel like it. In any case, always remember what Jean-Luc Godard said: Its not where you take things from - its where you take them to.

Windows 8 inspirationOffice, Window media center, Zune, Xbox, problem in current system

Windows Media Center

Content before crome

3725/11/2015Windows Media Center

Content3825/11/2015Xbox

Grids3925/11/2015Zune

Zune: Great Typography4025/11/2015Windows Phone 7

WP7-Wayfinding approach

4125/11/2015Windows Phone 8

Windows 8

Microsoft: One Design

Next Step.Scratching the tip of ice-berg (Add more people-Contribute, add, review, train)People who Design/Usability/UX.People who use Design/Usability/UX but dont know.People who dont use Design/Usability/UX.

Douglas Martin (Book design: A practical Introduction)Questions about whether design is necessary or affordable are quite beside the point: Design is INEVITABLE. The alternative to good design is bad design, not no design at all.

If some one gives work to you and say implement it, push it back and ask:WHY?For WHOM?HOW you came to know? Are you assuming? Are you sure it is what the user needs?