O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Frontend United: Etching wireframes & agile UX

522 visualizações

Publicada em

3 perspectives on how the same creative process drives the work of Roy Scholten as an artist, an open source contributor and as a user experience consultant.

Publicada em: Design, Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Frontend United: Etching wireframes & agile UX

  1. 1. Etching wireframes & Agile UX @royscholten, 2013 Monday, April 15, 13
  2. 2. Design process Monday, April 15, 13 Many sessions have been about with how to build something. Today, I'd like to talk a bit about what you can do to find out *what* to build in the first place. Because it doesn't matter how lean and agile your continuous delivery is if you don't start from an understanding of the problem you are trying to solve How do you get to that understanding? That's where the design process comes in. Because design is how it works.
  3. 3. User needs Business goals Technology Monday, April 15, 13 Before we dive into the process part, lets establish the domain we're working in. The interaction or user experience designer looks for the overlap between - business goals - user needs - technological constraints
  4. 4. User needs Business goals Technology Monday, April 15, 13 Only where those three meet there is a chance for a viable product or service So that’s the playing field established. Now for the process bit…
  5. 5. P.I.S.A. Monday, April 15, 13 I studied illustration at the art academy. One course was called concept development. It thought a method for generating creative work and drawing it to a conclusion of some sorts. It was very abstract…
  6. 6. P.I.S.A. Problem Inventory Selection Arbitration Monday, April 15, 13 This is what it stood for. We basically got two weeks to work on each stage. - find an interesting problem - generate multiple ways to solve it - choose the best option - improve that and ‘ship’ it, make it presentable. I’d like to show how I apply this pattern to 3 different but related kinds of creative work
  7. 7. ART Monday, April 15, 13 Hi, my name is Roy. I’m an artist.
  8. 8. Monday, April 15, 13 I make prints. Mostly abstract etchings and monoprints
  9. 9. Monday, April 15, 13 This is the working environment
  10. 10. User needs Business goals Technology Monday, April 15, 13 This is the domain. Let’s go over PISA
  11. 11. Problem? Me. Monday, April 15, 13 This makes it simple. I’m always around me This makes it hard. Using your own ideas and perspectives to create something.
  12. 12. Inventory Free experimentation. Generate lots of material Monday, April 15, 13 So finding an interesting problem in itself requires that I generate stuff. It’s mandatory to create a lot of waste here.
  13. 13. Monday, April 15, 13 Etching is where you etch an image into a zinc or copper plate. This allows for multiple prints from one original Monoprint comes down to applying ink to anything that will go through the press. Most of the times this material is brittle and so you can only create only one unique image
  14. 14. Monday, April 15, 13 Inventory! produce a lot of material
  15. 15. Selection What’s looking interesting, surprising, promising? Monday, April 15, 13 Review a body of work to discover trends, relations and identify an area to hone in on
  16. 16. Monday, April 15, 13 - This is why painters walk back and squint - This is what happens when you say "lets take a step back" - Pick a direction and create another inventory of options but this time focussed around the chosen direction you look at all the stuff together
  17. 17. Monday, April 15, 13 Isolate some pieces to see if they can live up to being presented as is
  18. 18. Monday, April 15, 13 For this particular round of work. I selected these two pieces. Not because the overall images were the strongest
  19. 19. Monday, April 15, 13 But there was a certain quality in the detail that I wanted to pursue further, get a grip on this particular kind of visual language
  20. 20. Arbitration Reproduce the happy accidents in a more controlled way Monday, April 15, 13 So where these were mostly monoprints, the non-reproducible technique. I wanted to find a way to capture this on zinc, and apply this to the zinc plate
  21. 21. Monday, April 15, 13 You cover a polished plate in ground Remove and apply it again. It’s very similar to using layer masks in photoshop.
  22. 22. Monday, April 15, 13 So, applying this to multiple plates, a body of work is generated that once again has to be reviewed, selected, reordered. It’s iterative! And then there comes the moment where it’s time to draw your conclusions and pick the works that you want to show.
  23. 23. Monday, April 15, 13 So where this was the starting point for this particular series of sprints.
  24. 24. Monday, April 15, 13 It resulted in these works. This is the etched wireframe one
  25. 25. Monday, April 15, 13
  26. 26. Monday, April 15, 13
  27. 27. Monday, April 15, 13 It’s really fun and interesting to have this
  28. 28. Drupal UX Monday, April 15, 13 Hi, my name is yoroy. I’m a Drupal core contributor, working on a more usable Drupal
  29. 29. User needs Business goals Technology Monday, April 15, 13 You could say that in core UX, this is where we work on things
  30. 30. Problems? No shortage of Drupal usability problems… Monday, April 15, 13 Drupal UX problems? - Just how serious the issues were became clear in 2008, when two proper usability lab tests were done on Drupal 6. - Dries wrote a blog post about not releasing Drupal 7 before 90% of the most serious issues were fixed. - I helped organize a usability sprint at Drupalcon Szeged and you could say that that's where we bootstrapped Drupal UX team. So, how do we work within core development to redesign and improve parts of the user interface?
  31. 31. Problem? Content creation UX not good enough. Make it better! Monday, April 15, 13 Having a well defined idea of what you'd like to see fixed is key. Pick your battles. Drupal is huge, don't try to boil the ocean. Pick a self-contained part of the user interface and get a clear idea of what you want to fix and what not. A critical audience is all the content creators and editors Those people that get to use Drupal content creation forms weekly or even daily, long after you’ve delivered the project. Where this used to be a decision made by IT, These people have a strong influence on which system to use
  32. 32. Monday, April 15, 13 Simple example. Some serious problems with even a simple version of a content form - no clear hierarchy to the overall page - essential options are hidden from immediate view - people do not know if ‘Save’ means it will be published or not.
  33. 33. Inventory, I What do we have now? What are the others doing? What is contrib doing? http://groups.drupal.org/node/214898 Monday, April 15, 13 So we have an interesting problem to crack. Relatively contained problem. Improvements will have a big impact on general perception of Drupal usability. So, again, we do the inventory 1, 2, 3
  34. 34. Monday, April 15, 13 (switch to firefox) its important to show your research, you need better foundations for your designs than ‘i like it that way’
  35. 35. Inventory, II Sketch! Monday, April 15, 13 The best way to get a good idea is to have many ideas - This is the part where some developers get really nervous! - Sketching is deliberately open-ended, literally sketchy: vague, half-defined. - Post your ideas and allow for feedback
  36. 36. Monday, April 15, 13 Throw out rough ideas. Create multiple options We had Skype meetings to review our ideas and point out promising areas, problematic ariesas
  37. 37. Selection Review & decide Continue in hi-fi (Photoshop!) Monday, April 15, 13 It makes sense to timebox things a bit. There comes a moment where you realize that you won’t be coming up with anything new (for now)
  38. 38. Monday, April 15, 13 yes photoshop. It’s not an option to dive in and write up the patch that implements this design in a quick and easy way. Photoshop is still usefull in those cases where you want to get an idea of what the page as a whole comes across Couple of iterations here as well. Exploring particular details. (switch to firefox)
  39. 39. Arbitration Take it to the issue queue for implementation Monday, April 15, 13 Wrap up the design phase, time to bring it to the issue queue - Create a brief, reference all the prior research and art, outline what you want to see built. - Ideally, kick it off with a patch - Developers love patches, it's their source material and gives them something to play around with and brings things into their domain of expertise - It can all still totally go off the rails, core issue queues often define the limits of what core devs see happening on d.o. - Usability test if necessary - From then on, it's mostly monitoring the discussion to maintain momentum, help deciding on additional issues and generally try to keep things on track (SWITCH TO FIREFOX)
  40. 40. Wunderroot Monday, April 15, 13 Hi. My name is Roy Scholten and I’m a user experience architect at Wunderroot Belgium. I joined Wunderroot because I want to be there where the rubber meets the road.
  41. 41. User needs Business goals Technology Monday, April 15, 13 So we've established multiple times that we can do better than producing static wireframes, mocking up detailed designs in photoshop and the like. We need to be more agile! Lean! reduce waste and focus on providing Business value asap. What can you do to help your clients discover the sweet spot?
  42. 42. Agile UX P. Business & user goals I. Sketch scenarios S. Review and select A. Prototype & Usability test Monday, April 15, 13 This is the format I’m applying these days to uncover what we need to build in order to best help cleints
  43. 43. Problem? Day 1: Business objectives User needs: persona (recruit test participants) Monday, April 15, 13
  44. 44. Monday, April 15, 13
  45. 45. Monday, April 15, 13
  46. 46. Monday, April 15, 13
  47. 47. Inventory Day 2: Sketch screens in the scenarios Monday, April 15, 13
  48. 48. Monday, April 15, 13
  49. 49. Monday, April 15, 13
  50. 50. Selection Day 3: Review all ideas Get stakeholder feedback Decide what to prototype Monday, April 15, 13
  51. 51. Arbitration, I Day 4: Build the prototype Monday, April 15, 13
  52. 52. Justinmind.com Monday, April 15, 13
  53. 53. Arbitration, II Day 5: Usability test Monday, April 15, 13 5 participants
  54. 54. Monday, April 15, 13
  55. 55. roy.scholten@wunderkraut.com Roy Scholten Contact Monday, April 15, 13