UX IS FOR LOSERS

“ You’ve got to start with the customerexperience and work backwards to thetechnology.

-Steve Jobs

WHO AM I?

FEDERICO PIZZUTTO

➤ User Experience Director@Sounday

➤ Interaction Design Foundation - Cagliari Local leader

➤ UX FUN supporting member➤ UX practitioner

and… dad ;^>

UX IS FOR LOSERS…or not?

“ You can blame the ‘stupid user’ all you want,but you still have to staff those phones withexpensive tech-support people if you want tosell or distribute within your company softwarethat hasn’t been designed.

-Alan Cooperhttp://www.cooper.com/

AGENDA

➤ Who you are?➤ What is UX?➤ Why should we care?➤ UX is a process➤ UX + Data➤ All you can eat (tools, processes, methods…)➤ Yes, but… how can we start integrate UX

processes?➤ Let’s try…

WHO ARE YOU?

WHO ARE YOU?

➤ Who are you?➤ What are your goals?➤ What are your desired outcomes?➤ Why are you interested in UX?

UX ?

USER EXPERIENCE

USER EXPERIENCE

The official definition of User Experience (UX), is: “A person's perceptions and responses resulting from the use and/or anticipated use of a product,

system or service”(ISO 9241-210:2010, subsection 2.15)

USER EXPERIENCE

User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.It also takes into account the business goals and objectives of the group managing the project.UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.Source: usability.gov

USER EXPERIENCE DESIGN

The term ‘User Experience Design’ was first coined by Don Norman in 1995 while he was the vice president of the Advanced Technology Group at Apple.He said: “I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.”

UX ≠ UI

TERMS & DEFINITIONS

WHY SHOULD WE CARE?

Create Products & Services that align with Business Objectives,

solving users problems and answering their needs.

HOW?

Accomplishing your business objectives is simple,

just focus on your users

Understanding the user journey Users are more than 1s and 0s. They’re people who are looking for the perfect solution to their needs. The user journey represents a scenario in which a user might interact with your product or service. The ups and downs on the graph correspond to how they are feeling at any given point.source: www.dtelepathy.com

Identify key opportunities Identifying the journey touchpoints that are causing problems for your users creates objectives we can work on together. For example, if your users are visiting your website but not converting, we may choose to focus our efforts on improving the experience within the acquisition touchpoint. Pinpointing friction focuses our strategy and creates measurable impact.

Remove Friction Designing a fluid experience for your users is the best way to improve their journey and accomplish your objectives. After the friction has been removed, your users will be able to easily use and interact with your product or website. We take care of your users so they take care of you.source: www.dtelepathy.com

UXDIS A PROCESS

CUBI: A USER EXPERIENCE MODEL FOR PROJECT SUCCESS

source: https://uxmag.com/articles/cubi-a-user-experience-model-for-project-success

GOOGLE DESIGN SPRINT

Source: https://www.smashingmagazine.com/2011/03/lean-ux-getting-out-of-the-deliverables-business/

ITERATE

CONFUSED ?

UX + DATAmeasure

DATA, A VERY IMPORTANT PART OF UX

➤ Data - driven decisions➤ Quantitative and qualitative data➤ Misure the UX➤ …Find opportunity

Analytics, heatmaps, funnels…

DATA-DRIVEN VS DESIGN-DRIVEN (ICEBERG)

METRICS CHECKLIST

a good metric......measures the usage of yourproduct by a person. The usageshould be specific to features thatdeliver value to your user.

a great metric......makes you look at all theother metrics and say “none ofthose other numbers matter ifwe donʼt get this right first.”

METRICS CHECK

TOOLS, METHODS

AND…All you can eat

From UX Team of One by Leah Buley

UXD METHODS (…SOME)➤ Stakeholders interviews➤ SWOT

(competitive review, content audit, heuristic evaluation)

➤ Strategy workshop (artifact from the future, faqs, Storyboard, Kano Models..)

➤ User Research (surveys, guerilla, card sorting)➤ Personas (proto-personas)➤ Users Journey➤ Moodboards, storyboards➤ Users and tasks flow➤ Red Routes➤ IA / Sitemap➤ Sketches & Wireframes➤ Mockups and prototypes➤ Usability Testing➤ Metrics & analytics tracking (eyetracking, A/B testing, )

WTF?

WHY USER RESEARCH?

➤ It is cheaper to test assumptions and iterate with interviews, mockups and prototypes before the product launch.

USER RESEARCH METHODS

PERSONAS

➤ A persona is a character that can represent a group of users, with demographics, behaviours, needs, goals

➤ They are filled with information derived from User Research methods (interviews, etc).

➤ Good personas are realistic➤ Use as reference➤ Evolving personas (data,

research, etc.)

Persona examples

USER JOURNEY➤ A series of steps based on a Scenario

where to show the journey of the user interacting with our product.

➤ Demonstrate the way users currently interact with the service / website / product

➤ Demonstrate the way users could interact with the service / website / product

WHY?➤ Demonstrating the vision for the

project➤ They help us understand user

behaviour➤ They help identify possible

functionality at a high level

Identify key opportunities Identifying the journey touchpoints that are causing problems for your users creates objectives we can work on together. For example, if your users are visiting your website but not converting, we may choose to focus our efforts on improving the experience within the acquisition touchpoint. Pinpointing friction focuses our strategy and creates measurable impact.

USER FLOWS

➤ Create your user's flow based on the scenarios you created, you can use it later to review the journey and create wireframes on top of each step.

➤ Map the main steps of a scenario, validating persona and assumptions

Youtube App Tasks Flow

CHOOSE PACK APP DASHBOARD METADATA

UPLOAD

PAYMENT FORM

INFO

UPLOAD

This action is for WAV files when youchoose Sound Recording

This action is for WAV and JPG files when you chooseSound Recording + Art Tracks

METADATA

This is for Album and Track data

CHOOSE PACK

Here you can define yourpack. There are 4 packs per each delivery type:4 packs for Sound Recording4 packs for ST + Art Tracks

INFORMATIONS

Info about specifications or how it works.First time only.

Design for no content.

TASK FLOWS

➤ Task Flow gets you thinking about how people really use your products/service

➤ Identify where and when there is a potential fail in the flow

➤ Document the “in between” transition from one step to another

RED ROUTES

➤ The key activities that people expect to be able to complete with the system: these are the reasons why people have purchased it.➤ How many users need this

function?➤ How often do users need

this function?

SKETCHES AND WIREFRAME

➤ Sketch let you explore quickly different directions

➤ Sketching is cheap and avoid perfectionists. Focus on the main idea and not the details.

➤ Wireframing (lo, mid, hi) is the way to go to annotate in details the skeleton and the supposed behaviour and Interaction

Examples

HEURISTIC EVALUATION

➤ Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").

HEURISTIC EVALUATION (UI)➤ Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.➤ Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

➤ User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

➤ Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing.

➤ Error preventionEven better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

➤ Recognition rather than recallMinimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

➤ Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

➤ Aesthetic and minimalist designDialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

➤ Help users recognize, diagnose, and recover from errorsError messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

➤ Help and documentationEven though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

MOCKUP AND PROTOTYPE

➤ We create mockup to better communicate wirth stakeholders

➤ We create Prototype to test early the UI and validate the work. Before implementing it.

A/B TESTING

➤ We test variation of a design to misure what is working and testing assumptions.

SOME TOOLS (MOSTLY FREE)

➤ Zurb Free apps (design critique)http://www.spurapp.com/http://www.clueapp.com/

➤ Heuristic (http://www.uxcheck.co/)➤ http://uxchecklist.github.io/➤ Hotjar

See how visitors are really using your website, collect user feedback and turn more visitors into customers.

➤ Google Analytics➤ Balsamiq, Axure, UXpin, Omnigraffle, Adobe, Sketch➤ Invision App➤ Trello➤ etc

EXTRA

PRINT AND REMEMBER

➤ UXD is a process➤ UX is holistic➤ Empathy➤ Fail early, fail often➤ UX is a Lifecycle➤ UX is a Conversation➤ Outcomes rather than Outputs➤ Share share share➤ Design with Intent

SOME SOURCES

➤ https://www.nngroup.com (Nielsen Norman Group)➤ http://boxesandarrows.com/➤ http://www.uxapprentice.com/➤ http://www.uxbooth.com/➤ http://uxmag.com/➤ http://uxdesign.com/➤ http://jnd.org/➤ https://www.interaction-design.org/➤ http://www.uxforthemasses.com/➤ http://www.dtelepathy.com/blog/➤ http://uxdesign.cc/ (newsletter)➤ google it :-)

“ Good design is good business.

-IBM CEO

EVANGELIZE !

THANK YOUFederico Pizzuttofederico@pngised.net

https://it.linkedin.com/in/federicopizzuttohttps://about.me/federico.pizzutto

IDF - https://www.facebook.com/groups/idf.cagliari/