Diese Präsentation wurde erfolgreich gemeldet.

Design Process | Tool 02: Scenario - Tool 03: Wireframe

2

Teilen

Wird geladen in …3
×
1 von 47
1 von 47

Design Process | Tool 02: Scenario - Tool 03: Wireframe

2

Teilen

Herunterladen, um offline zu lesen

"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/

"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/

Weitere Verwandte Inhalte

Design Process | Tool 02: Scenario - Tool 03: Wireframe

  1. 1. DESIGN TOOLS scenarios wireframes
  2. 2. WHAT IS DESIGN? a. To conceive or fashion in the mind; invent: b. To formulate a plan for; devise 2. To plan out in systematic, usually graphic form: 3. To create or contrive for a particular purpose or effec 4. 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 plans 2. to plan and make (something) artistically or skilfully 3. (tr) to form or conceive in the mind; invent 4. (tr) to intend, as for a specific purpose; plan 5. (tr) Obsolete to mark out or designate Collins English Dictionary – Complete and Unabridged © HarperCollins 2003
  3. 3. DESIGN PROCESS = 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. Parametri specifiche tecniche (tipologia di sistema); efficienza; costi; affidabilità; sicurezza; tempi di realizzazione; tempo di vita operativa previsto;
  4. 4. WATERFALL MODEL AGILE METHOD
  5. 5. developerdesignerCOLLABORATION creatinguser profilesinterrogativethinkingwhat if approachmind mappingvisual thinkingscenariosimplementlearndefinewhowhatwherewhenwhyhowwhat if ... ? 6 w’sheuristicshow to ... ? heuristicsheuristicschooseprototype& testideateresearchunderstandobserve USER-CENTERED COLLABORATIVE CONTEXT AWARE EMOTIONAL DESIGN-THINKING IS:
  6. 6. 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.
  7. 7. tool 01: PERSONAS
  8. 8. tool 02: SCENARIOS
  9. 9. WHO WHEN WHAT WHERE WHY HOW tool 03: DESIGN FRAMEWORKS
  10. 10. 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.
  11. 11. who? CLIENT = END USER ? ? what? PRODUCT LIFE CYCLE WEBSITE LIFE CYCLE
  12. 12. when?
  13. 13. where?
  14. 14. why?
  15. 15. how?
  16. 16. TASKS GOALS
  17. 17. WHAT IF ...? E SE FOSSE ...?
  18. 18. STORYBOARDING A SCENARIO
  19. 19. https://vimeo.com/12174460
  20. 20. what problem are you solving?
  21. 21. what difference does it make?
  22. 22. 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 CAST SCENARIOS 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
  23. 23. 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”.
  24. 24. 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.
  25. 25. 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 tasks Identify 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 five If 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 analyze Count 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, 2006 by John Pruitt (Author), Tamara Adlin (Author) http://www.amazon. com/Persona-Lifecycle- Throughout-Interactive- Technologies/ dp/0125662513
  26. 26. SKETCHING WIREFRAMES
  27. 27. http://wireframes.linowski.ca/category/samples/
  28. 28. http://www.mockflow.com FREE WIREFRAMING TOOLS
  29. 29. http://www.balsamiq.com
  30. 30. http://wireframesketcher.com
  31. 31. https://www.kickstarter.com/projects/1040120743/the-sticker-ui-book-by-killer- inc

×