DESIGN TOOLSscenarioswireframes

WHAT IS DESIGN?

a. To conceive or fashion in the mind; invent: b. To formulate a plan for; devise2. To plan out in systematic, usually graphic form: 3. To create or contrive for a particular purpose or effec4. To have as a goal or purpose; intend.5. To create or execute in an artistic or highly skilled manner.The American Heritage® Dictionary of the English Language, Fourth Edition copyright ©2000

1. to work out the structure or form of (something), as by making a sketch, outline, pattern, or plans2. to plan and make (something) artistically or skilfully3. (tr) to form or conceive in the mind; invent4. (tr) to intend, as for a specific purpose; plan5. (tr) Obsolete to mark out or designateCollins English Dictionary – Complete and Unabridged © HarperCollins 2003

DESIGNPROCESS

DESIGNPROCESS = PROCESSO

PROGETTUALEÈ un processo che a partire da norme tecniche, calcoli, specifiche e disegni, perviene alla definizione dei dettami, linee guida e specifiche necessarie alla produzione/realizzazione di un manufatto, un edificio, un componente, un apparato, o in generale di un prodotto o un servizio (per esempio un'abitazione, un ponte, una strada, una sedia, un'autoveicolo, un software, un sistema elettronico) riassunte all'interno di un progetto.

Tipi Progettazione innovativa.Progettazione di adattamento. Progettazione variante.

Fasi analisi delle specifiche;studio di fattibilità;progettazione logico-funzionale;dimensionamento;testing.

Parametrispecifiche tecniche (tipologia di sistema);efficienza;costi;affidabilità;sicurezza;tempi di realizzazione;tempo di vita operativa previsto;

WATERFALL MODEL

AGILE METHOD

developer designer

COLLABORATION

creatinguser profiles

interrogativethinking

what if approach

mind mapping

visual thinkingscenarios

implement

learn

define

whowhatwherewhenwhyhow

what if ... ?6 w’s

heuristics

how to ... ?heuristics

heuristicschoose

prototype& test

ideate

research

understandobserve

USER-CENTEREDCOLLABORATIVECONTEXT AWARE

EMOTIONAL

DESIGN-THINKING IS:

DEFINE

RESEARCH

IDEATE

PROTOTYPE & TEST

CHOOSE

LEARN

IMPLEMENT

01

02

03

04

05

06

07

Review history of the issue; remember existing obstacles.Collect examples of other attempts to solve the same issue.Note the project supporters, investors, and critics.Talk to your end-users, brings you most fruitful ideas for design.Take into account thought leaders' opinions.

Decide what issue you are trying to resolve.Agree on who the audience is.Prioritize this project in terms of urgency.Determine what will make this project successful.Establish a glossary of terms.

Identify the needs and motivations of your end-users.Generate as many ideas as possible to serve identified needs.Log your brainstorming session.Do not judge or debate ideas.During brainstorming, have one conversation at a time.

tool 01: PERSONAS

tool 02: SCENARIOS

WHO

WHEN

WHAT

WHERE

WHY HOW

tool 03: DESIGN FRAMEWORKS

What is a framework?

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.

Web-design frameworks

In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.

To summarize: there’s no need to reinvent the wheel.

The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided.

who?

CLIENT = END USER

? ?what?

PRODUCT LIFE CYCLEWEBSITE LIFE CYCLE

when?

where?

why?

how?

TASKS GOALS

WHAT IF ...?E SE FOSSE ...?

STORYBOARDING A SCENARIO

https://vimeo.com/12174460

whatproblem are you solving?

whatdifference

does itmake?

You have your cast of characters, but the plot is still lacking. After you’ve finished your research and created a group of personas based on your target users, oneof the best ways to connect mindset to action is by creating user scenarios.

User scenarios are thought exercises where you map out the actions of each persona from the first point of interaction with your website to when they complete a goal.

PERSONAS ARE YOUR CASTSCENARIOS CREATE THE PLOT

If your personas cannot achieve their goals or if the process is too convoluted, then you now have a visual representation of your problem and can go back and solve it easily.

User scenarios are one of the best way to test your site structure because they isolate problems before they become problems and also help you think of ways to improve your structure.

Just as with personas, the more actual research and less guesswork, the better. We’ll explain how to turn personas into user scenarios and analyze a real user scenario.

TIPS 4 CREATING SCENARIOS

1. STEP

Step one in creating a scenario is to create realistic goals for your personas. From there, it is just a logic puzzle. When it comes to user scenarios, there are three main categories: goal-based scenarios, elaborated scenarios, and full task scenarios.

Goal-based are the most straightforward while elaborated scenarios read more like “persona stories”. We won’t describe all of them in detail here, but we will provide a process that is helpful regardless of scenario type.

Each user scenario starts with a user story, structured as “As a [role], [the persona] wants to [complete this action] so they can [fulfill this goal]”.

A user scenario will then expand upon user stories by including details about how your system could be interpreted, experienced, and used. Ben Hunt, creator of Web Design From Scratch, believes that scenarios add elasticity to personas by filling in the “why” behind the “who”.

When creating user scenarios, you should consider:

• The persona’s environment Where are they when they interact with your web site? Are they at work? At a coffee shop? Or at home?

• Any factors that impact the context of use How fast and stable is their Internet connection? How much time do they have? What distractions are there?

• Triggering events & goals What specific goal motivates the persona to interact with the web site on this occasion? What event triggered this scenario?

• Persona behavior Visualize the scene. What considerations are most important in the persona’s mind? What clues are they looking for in particular?

What the user does. Remember to focus on what happens, not necessarily how it happens. For example, Paul brings up a larger image of a bouquet of flowers that he thinks his Mum would like.

Any comments or information that you feel is important at this step. For example, you might want to make a note that there might be alternative images available for a bouquet of flowers, such as a front and side shot.

Any questions or assumptions that arise are this step that you’ll want to resolve. For example, will the images for flowers all be the same size and aspect ratio?

Any ideas or good suggestions that people have. For example, it would be good to allow Paul to zoom in on an image so that he can see the bouquet of flowers in more detail.

Prioritizing Top Tasks: Have Others Do It For You

You now know who you’re writing for and how they’ll react to your website, and those are the top two priorities. It’s time to determine how you should prioritize the features of your interface in response to the user scenarios you’ve created.Jeff Sauro, founder of Measuring Usability LLC, explains how to handle the multitude of tasks every designer has on their to-do pile. He encourages using a strategy of having prospective users themselves prioritize the tasks for you, originally proposed by Gerry McGovern in his book The Stranger’s Long Neck.

1. List the tasksIdentify features, content, and functionality that need to be addressed, and list them in the users’ language, avoiding technical jargon. Present them in a randomized order to representative users you think might be interested in your site.

2. Ask the users to pick fiveIf you’ve properly laid out all the tasks, then there should be a lot. The user will skim the list for keywords, and notate the ones important to them.

3. Graph and analyzeCount up the votes and divide by the number of users. Typically this forms the “long neck” shape, hence McGovern’s title.That’s the basic gist: not only do you now know what your top priorities should be, but you have them verified by your users.

http://www.uxforthemasses.com/scenario-mapping/

The Persona Lifecycle: Keeping People in Mind Throughout Product Design (Interactive Technologies) Paperback – April 24, 2006by John Pruitt (Author), Tamara Adlin (Author)

http://www.amazon.com/Persona-Lifecycle-Throughout-Interactive-Technologies/dp/0125662513

SKETCHING WIREFRAMES

http://wireframes.linowski.ca/category/samples/

http://www.mockflow.com

FREE WIREFRAMING TOOLS

http://www.balsamiq.com

http://wireframesketcher.com

https://www.kickstarter.com/projects/1040120743/the-sticker-ui-book-by-killer-inc