From Aligning Boxes To Aligning Visions - A Journey Through Prototyping [UX Ghent]

  • Published on
    08-Feb-2017

  • View
    60

  • Download
    0

Transcript

  • A Journey Through Prototyping

    Clment Gnin UX Architect at ONE Agency

    @ClemGn

    From Aligning Boxes To Aligning Visions

    UX Ghent www.uxghent.be | @UX_Ghent

    http://www.uxghent.be

  • Balsamiq Mockups

  • Omnigraffle

  • Omnigraffle

  • Wireframes as a document

    Limitations:

    Hard to explain interactions Not optimised for changes

    Not always clear for clients Not adapted for responsive design

  • Other tools I tried

  • Paul Adams

    Full talk (YouTube)

    https://youtu.be/Q7gQ-Vk0DQA

  • Paul Adams

  • Jeff Gothelf

    Getting Out Of The Deliverables Business

    Introduction to Lean UX (SlideShare)

    http://www.slideshare.net/ClementGenin/introduction-to-lean-ux-32034949

  • My conclusion

    How can I avoid wasting time aligning boxes?

    I decided to minimise/skip wireframes in my process.

    Doing that forced me to compensate:

  • Sketches

    Listen Sketch Document

    Graphical design Code

    Oral communication

    Examples

  • Existing examples

    Listen Sketch Document

    Graphical design Code

    Oral communication

    Examples

  • Textual description

    Listen Sketch Document

    Graphical design Code

    Oral communication

    Examples

  • Conversations

    Listen Sketch Document

    Graphical design Code

    Oral communication

    Examples

  • Epiphany

    None of these aspects work on its own. The projects for which I had skipped/minimised wireframes

    had poorer results.

    It hit me: there nothing wrong with wireframes.

    What matters is the intent:

  • Aligning visions

    Sketch Document Gra. design

    Diagrams

    Examples

    Wireframes PrototypeOral com.

    YouPM

    Client

    Designer Dev

    Partner

    Stake holder

    Content team You

    PM

    Client

    Designer Dev

    Partner

    Stake holder

    Content team

  • 5 things I changed

    Frame the problem first

    Use real content

    Annotate

    Expose it

    Keep it proto

  • Frame the problem

    Hey Clment, can you quickly make a wireframe of this page?

    Sure, all I need is to know: who is the user in what situation they are what they want to achieve what their current options are how it fits in the business strategy if there are any constraints

  • Use real content

  • Annotate

  • Expose it early/often

    YOU TEAM

    STAKE HOLDER USERS

  • Keep it proto

  • Activity Flow (work in progress)

    Activity on screens

    User context:

    (Inter)Actions Thoughts

    Environment Time

    Business context:

    Actors (Inter)Actions Environment

    Time Content

    Activity name User goalBusiness goal

  • Thank you! What do you think?

    Prototyping - A Practitioners Guide by Todd Zaki Warfel

Recommended

View more >