• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Intro to Sketching Prototypes
 

Intro to Sketching Prototypes

on

  • 895 views

This last Wednesday, we hosted a webinar called Intro to Sketching Prototypes (http://www.youtube.com/watch?v=RMMn88sP2NQ). These are the slides from that presentation. ...

This last Wednesday, we hosted a webinar called Intro to Sketching Prototypes (http://www.youtube.com/watch?v=RMMn88sP2NQ). These are the slides from that presentation.

You can download the prototyping tool shown in the presentation here:
http://www.infragistics.com/products/indigo-studio

Webinar Description: Sketching prototypes? Yep, you heard that right—you'll have to watch to learn what it means! :) This webinar tangos with the theory behind effective prototyping, illustrates some of the tools at our disposal, and demonstrates how to effectively leverage a new software prototyping tool that tackles this practice head on--Indigo Studio. You'll come away more empowered to design software that exceeds expectations.

Statistics

Views

Total Views
895
Views on SlideShare
895
Embed Views
0

Actions

Likes
2
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://www.billverplank.com/professional.htmlhttp://www.billbuxton.com/
  • From page 4, Effective Prototyping for Software Makers.
  • You need to have some idea what you want to accomplish with your prototype
  • Show xactions left-side, repeater alt.
  • Things to keep in mind: some participants will go crazy trying to click on everything. Important that you give them a specific goal—the one you were designing for, and then make sure they understand that it’s not fully functional. If something doesn’t work, they can assume it’s just not prototyped. Tell them to verbalize, but you should keep an eye on what they’re doing as well and make notes. Usually best to have one note taker and one person who facilitates to keep things on track.

Intro to Sketching Prototypes Intro to Sketching Prototypes Presentation Transcript

  • Intro to Sketching PrototypesBy Ambrose Little
  • Ambrose is just this guy, ya know?Designing and developing software since the late 90s at companies as small as one and aslarge as Verizon, working on internal systems, Web sites, and commercial software products. Principal Design Technologist at Infragistics (Product Manager, Indigo Studio) Tweet @ambroselittle, @indigodesigned http://linkedin.com/in/ambroselittle Blog: ambroselittle.com #prototyping #ux #ixd #design
  • Prototypes, What Are They?
  • What’s your definition? Functional/Interactive? Full App Simulation? (from dictionary.com)
  • The Two Bills Bill Verplank Bill Buxton
  • BillV says… “‘Prototyping’ is externalizing and making concrete a design idea for the purpose of evaluation.”
  • Self-Reflection Expert Review Team Critique Client Review User Feedback/Critique“Evaluation” is a big word. Observing Users
  • “Prototyping” is a big word, too. But what’s at its core is that it’s not the final product. It’s on the opposite end of the lifecycle. One might say then that, ideally, a prototype is “sketchy”…
  • BillB says… Sketching in the broad sense, as an activity, is not just a byproduct of design. It is central to design thinking and learning. Sketching is: Quick. Timely. Inexpensive. Disposable. Plentiful. A sketch suggests and explores more than confirms. A sketch has minimal detail: “Going beyond ‘good enough’ is a negative.” Sketching is a process of dialog, of learning.
  • BillB also says… “Sketches are not Prototypes!” But he goes on to say this is because: “Much of this has to do with the related attributes of cost, timeliness, quantity, and disposability. Essentially, the investment in a prototype is larger than in a sketch, hence there are fewer of them, they are less disposable, and they take longer to build.”
  • So… can you sketch prototypes?
  • Emphatically, Yes! Yuhuh! The value of ‘sketching’ lies in its disposability, in the ability to efficiently explore many ideas with low cost. Sketching prototypes is about just this—using tools that make it efficient to create many, quick, timely, disposable “sketches” of your design ideas so that you can get them out of your head and evaluate them.
  • How to Effectively Sketch Prototypes
  • 1. What are you trying to learn?
  • Some Reasons for Software Prototyping Suggest/explore a user experience flow. Sketching Prototypes Suggest/explore particular interfaces on their own. Suggest/explore transitions & animations. Communicate a particular design for implementation. Full on application simulation. Evaluate the feasibility of a design.
  • 2. Select the Right Tool for the Purpose
  • Suggest/Explore a User Experience Flow Writing – just narrate a story/scenario. (Leave out UI details.) Storyboarding – narrate with words and pictures. http://uxmag.com/articles/storyboarding-in-the-software-design-process Sketching Interaction Flow – design UI step-by-step for a particular flow.
  • ChallengeswithWireframesfor Flow
  • Suggest/Explore Particular Interfaces Pen & Paper/Whiteboard – literally sketch in the traditional sense. Wireframing – lay out static, low-fi UIs with a software tool. Multiple Flows – design branches of different flows on same UI.
  • StaticWireframesRequireMore Notesand AreHard toEvaluate
  • Suggest/Explore Transitions/Animations Interactive Prototyping Tool – design animations with timelines, etc. Animation Frameworks – code a prototype with an animation framework.
  • Communicate for Implementation Basically any artifact you create can be used to communicate design intent, so a sketchy prototype could be used for this purpose. The drawback is it is probably lacking in a lot of details, so you will have to fill those in somehow: annotations, further fleshing out the prototype, ad hoc answering questions, etc. These activities quickly leave the sketching aspect behind, so reserve filling in details for after the sketching phase when you’ve generated, synthesized, and iterated on your sketches.
  • 3. Keep It Throwawayly! Sketching your prototype will utterly fail if you don’t stay focused. - Prefer single path prototypes early on. - Omit irrelevant details (styling, perfect animations, pixel perfection, exact copy) - Fake it! Use images, icons, layers, shapes, groups—whatever is good enough to explore and evaluate the idea. - This is not for production! Never start with the idea it will turn into productional code. Bad!
  • 4. Don’t Stop with Your First Concept
  • 5. Evaluate with REAL USERS. You don’t have to evaluate every single concept, but you should at least evaluate one if not two prototypes that seem promising. They don’t have to be fully functional, and probably shouldn’t be! If not real users, then a user-like substance—someone who resembles them that is not on the team and is not the client/stakeholder.
  • Keys to Effectively Sketching Prototypes1. Know the purpose of your prototype—and don’t get distracted.2. Select the right tool/method for your purpose.3. Keep it throwawayly! Do the bare minimum.4. Don’t stop with one concept—be fruitful and multiply. 5. Evaluate with real users.
  • Sources Quoted
  • Enjoy! Version 1 is Free Forever. bit.ly/indigostudio | bit.ly/indigostudio-blog @indigodesigned