'

Shredding the Wireframe

Понравилась презентация – покажи это...





Слайд 0

Shredding the Wireframe Intro to Rapid UX Prototyping Kyle Outlaw / Group Experience Director @Razorfish Photo source: Musician Buzz


Слайд 1

Agenda What is UX? (Let’s make sure we are on the same page here) Example deliverables Limitations of wireframes/embracing the prototype Some awesome tools (Invision App, Justinmind, POP) Case study: Razorfish Tech Summit App What about the spec? Q+A 1 Photo source: MC Quinn, Flickr


Слайд 2

But first…introduce yourself


Слайд 3

What is UX? 3


Слайд 4

What is UX? 4 Empathizing with users to make products better (feel their pain) Understanding how consumers will actually use a product or service and design It used to be about web sites and web-based applications, but mobile web sites and applications, social platforms need a lot of UX help Source: Office Space (20th Century Fox)


Слайд 5

Our Common Enemy 5 Source: Screenshots of Despair http://screenshotsofdespair.tumblr.com/


Слайд 6

Our Patron Saint 6 “Design is not just what it looks like or feels like. Design is how it works.” –Steve Jobs, Patron Saint of User Experience Practitioners


Слайд 7

Origins of the Term 7 Source: Businessweek


Слайд 8

Rooted in 8 Architecture Graphic design Industrial design Human Factors


Слайд 9

Also heavily inspired by 9 Film Animation Comics


Слайд 10

The Process 10 1. Get to know users 2. Analyze user tasks and goals 3. Establish requirements 4. Prototype ideas 5. Test Rinse and Repeat


Слайд 11

How We Measure Success Effectiveness – how easily can users achieve their goals Efficiency – how fast can they do it Satisfaction – Experience = good/bad? (Would they share it with others?) 11


Слайд 12

12


Слайд 13

3 Key Practices in UX 13 Research Knowing the user Information Architecture + Interaction Design Sketching the experience Content Strategy Planning, development, and management of content Photo sources: CannedTuna, Flickr; Martin Stabe, Flickr; Baldiri, Flickr


Слайд 14

Some Deliverables


Слайд 15

Ecosystem Diagram 15 c c


Слайд 16

User Journeys 16 c c c


Слайд 17

Site Map 17 c


Слайд 18

Wireframes 18 c


Слайд 19

We <3 wireframes, but they are quickly becoming obsolete.


Слайд 20

Wireframes Have Several Limitations What you see is often not what you get Insufficient when describing nuanced interaction Approvals can never be final until the result is seen in code It’s difficult to test wireframes Many clients have difficulty providing feedback on wireframes Laborious, time intensive Inefficient for detailing responsive design 20 Image source: Wikipedia


Слайд 21

21 Development Processes are Evolving


Слайд 22

Out with Waterfall* 22 * As with a symphonic orchestra, the emphasis of Waterfall is the plan (or score) and therefore before beginning any kind of development there needs to be a clear vision in order. Orchestras however typically don’t function well when project goals are in flux or unclear (i.e. the composition is still being written). Photo source: Vancouver 125, Flickr


Слайд 23

In with Agile* 23 * Every software development firm or agency seems to have it’s own flavor of agile, leading to difficulties in applying a standard definition to the term. At Razorfish, it has come to mean a tight, fast process that is multi-disciplinary yet on the outside might appear to be somewhat chaotic. Like any good jam session, agile can be good in situations where the end-goals of projects are not completely defined. Photo source: Incase, Flickr


Слайд 24

24 And we need some new tools


Слайд 25

25 Enter the Prototype


Слайд 26

What do we mean when we say prototype? A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. 26 Source: Wikipedia Photo source: Steve Jurvetson, Flickr


Слайд 27

Advantages to Prototyping the UX 27 Get early buy-in from business stakeholders Enables testing early and often with users Encourages multi-disciplinary collaboration Plays well with the agile methodology Shows not just what it will look like but how it will work Kill fewer trees


Слайд 28

There are several categories Proof-of-Concept Prototype Form Study Prototype User Experience Prototype Visual Prototype Functional Prototype (a.k.a Working Prototype) 28 Source: Wikipedia


Слайд 29

The Fidelity Spectrum 29 Photo sources: Cesar Astudillo, Flickr, Invision App, Razorfish Emerging Experiences


Слайд 30

30 Set Expectations on Prototype Fidelity


Слайд 31

Some Popular Tools 31


Слайд 32

32


Слайд 33

33 Medium-Fi


Слайд 34

34 Medium-Fi


Слайд 35

35 High-Fi


Слайд 36

36 Case Study: Razorfish Tech Summit App


Слайд 37

About the Razorfish Tech Summit Annual event hosted by Razorfish Includes clients and industry thought leaders Two days of keynotes, panels, case studies and workshops Explore how these changes impact customer experiences 37 Photo source: Razorfish Emerging Experiences


Слайд 38

Our Mission Create an app for Razorfish’s 2014 Tech Summit that: Provides basic conference information Show cases Gimbal Beacon technology Design and build in an insanely short period of time 38


Слайд 39

The Gimbal Beacon 39


Слайд 40

Tech Summit App Features 40 Linkedin Authentication/Registration Location aware heat map visualization (with easter eggs/prizes) Beacon integration Calendar with list of events, and speakers (link to Linkedin profiles) About the summit Get help (contact information for event organizers) IOS device support


Слайд 41

41 Sketching the Experience


Слайд 42

42 Application Map


Слайд 43

43 Sketching the Experience


Слайд 44

44


Слайд 45

45


Слайд 46

46


Слайд 47

47


Слайд 48

48


Слайд 49

49


Слайд 50

50


Слайд 51

Testing: Early and Often 51


Слайд 52

But What About the Spec? 52


Слайд 53

53 Plays well with Box or Dropbox


Слайд 54

Thanks!! Photo sources: Dustin Gaffke, Flickr


Слайд 55

55 Q+A


×

HTML:





Ссылка: