Drawing Ideas a Hand-drawn Approach for Better Design Pdf Download

Have you ever wondered how you could convey your design decisions more effectively to your colleagues and users in a timely and cost-efficient manner? Have you found yourself stuck in a design, unable to see alternative approaches? Are you sure you are applying usability engineering to the right design or to the only design you have? You can rely on sketching, a proven design tool, to help you explore your design space more fully, avoiding the pitfalls of focusing on suboptimal design choices ahead of time.

Bill Buxton, a Canadian pioneer in the human-computer interaction field and a principal designer at Microsoft Research, thinks software development lacks a "design process" that helps UX designers gain clarity about their design decisions before building a system. With this in mind, Buxton and his colleagues wrote Sketching User Experience: Getting the Design Right and the Right Design and Sketching User Experiences: The Workbook to help UX designers (re)discover sketching as a time-tested tool with ample application in the design of experiences with digital technology. Here, we distil the key ideas found in both books for the busy designer to help you (re)discover how you can improve your daily work through sketching.

"… there are techniques and processes whereby we can put experience front and centre in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching."
– Bill Buxton

Sketching is a distinctive form of drawing which we designers use to propose, explore, refine and communicate our ideas. As a UX designer, you too can use sketching as your first line of attack to crack a design problem.

Advantages of Sketches

More particularly, sketches can assist you in the design process in the following ways (Greenberg et al., p. 4):

• think more openly and creatively about your ideas
• create abundant ideas without worrying about their quality
• invent and explore concepts by being able to record ideas quickly
• record ideas that you come across
• discuss, critique, and share ideas with others
• choose ideas worth pursuing
• archive your ideas for later reflection
• have fun creating while designing

Is that a Sketch?

Because sketches help you propose, explore, refine and communicate your design ideas, it follows that not all drawings are sketches. Sketches have the following characteristics:

• Quick: Don't invest a long period producing them.
• Timely: Produce them when and as the need arises.
• Disposable: Rely on their usefulness to explore a concept and not on their production costs.
• Plentiful: Produce sketches as a collection that explores different aspects of interaction over time.
• Minimalist: Use sketches to clarify one concept at a time.

"... there is nothing even vaguely resembling a "design process" in software, at least not in the way that an industrial designer would understand that term."
– Bill Buxton

Sketches vs. Prototypes, Fight!

Some designers may assume the role of sketches in the design process is the same as that traditionally associated with low-fidelity prototyping, but that is not the case.

Sketches and prototypes have distinctive roles in the development of a design concept and its refinement. You should use them at different stages. Draw sketches first in the exploratory stages of a design to propose, refine, communicate and critique your ideas in a "tangible" format. Later, use low-fidelity prototypes to test broad concepts and specific features.

The role of sketches and prototypes is complementary, but not interchangeable. Because prototypes demand a larger investment, we can't and shouldn't produce as many prototypes as sketches.

"... although design is essential, it is not sufficient. Design is just one—albeit an important one—of the components requisite to the development of successful, appropriate, and responsible products."
– Bill Buxton

Author/Copyright holder:Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Sketches and prototypes have different uses in the design funnel. Adapted from Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

The design funnel below illustrates the iterative and exploratory nature of sketches during the ideation stage of the design process. As the right design comes clearer into focus, the costs of the product development cycle (red arrow) increase. Increased costs prevent you from fundamentally altering your design choices. Use the later stages of the design funnel to apply usability processes. Use usability engineering on more refined and costly prototypes that can simulate the expected functionality.

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

The design funnel illustrates the use of sketching to identify the right design as well as the application of usability methods to refine it. As investment increases (red arrow), you lose the ability to make major changes to the design selected. Adapted from Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Getting the Right Design

When you use sketching as an integral part of your design practice, it can help you explore competing ideas and designs. Having multiple sketches of competing designs will allow you to compare and contrast them. This process will ease identifying the one design that satisfies your problem requirements and vision.

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

In the early stages of the design process, you should explore multiple design ideas simultaneously to identify the right design. Adapted from Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Use sketching in the early stages of the design funnel to explore multiple design directions at low cost. Refrain from developing low- or high-fidelity prototypes at this stage. Discard promising leads that, upon closer inspection, are unable to meet your problem requirements.

Premature focus on a single design idea leads to a narrowing of your space of opportunities. While it's possible that you may identify a good design from the development of a single idea, you will be unable to confirm whether other ideas never explored may have provided a better solution to your problem.

What is more, any feedback from colleagues and users will be relevant only to the single solution you present. This circumstance may further blind you to consider alternative designs. Not only that, users provide biased input when presented with a single design. Also, their feedback is narrower and less insightful than when shown several design options (Tohidi et al., 2006).

"... design is a distinct discipline. It involves unique skills that are critical to the molding of [...] emerging technologies into a form that serves our society, and reflects its values. Far from being a luxury, informed design is essential from the technical, economic, and cultural perspective."
– Bill Buxton

Getting the Design Right

Once you have identified the right design, you should continue revising and reviewing your chosen design through additional sketching to ensure it's an optimal design solution to your problem.

At this stage, you should apply usability engineering iteratively to build, test and evaluate your selected design. Every usability cycle would thus ensure the design converges on the optimal solution without major changes.

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Refine the right design through an iterative usability approach. Adapted from Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Design and usability processes are complementary but not the same. Design explores a space of possibilities to identify the right design or solution to a problem from competing alternatives. Usability engineering sharpens the selected design, ensuring it satisfies all relevant usability criteria (i.e., getting the design right).

Design activities are more prominent in the early stages of the product development cycle. Management, marketing and engineering frame the space from which design derives a solution to a set of requirements. In time, management, marketing and engineering will take ownership of the product of the design process. The influence of design, however, never disappears. Design activities must continue throughout the entire cycle, providing solutions to unseen problems and probing for the next product generation.

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

A complete view of the role of design, usability engineering and other areas of a business enterprise in the product development cycle. Adapted from Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton, Sketching User Experiences: The Workbook, 2011.

The ABC's of Sketching

Lines, triangles, rectangles and circles are the building blocks of any sketch. You can likely draw these shapes with varying degrees of dexterity. Experiment with variations in line thickness and hatching style to increase the power of these basic elements so as to convey the salient features of an object.

As you gain dexterity observing real-world objects to extract their constituent parts in your mind, you will become adept at recreating them on paper through your own sketching vocabulary. Keep in mind, your sketches are not meant to be a detailed representation of an object.

You can use stick figures and variances in their postures and poses, along with motion lines, to represent people and actions. Use subtle variances in the posture of stick figures paired with symbols to convey different emotions.

Faces are our preeminent medium to convey emotions. Use simple variations in the eyebrows and mouths to represent a wide range of emotions in a sketch like those shown below.

You can combine facial emotions, postures and objects to represent actions and situations. Constant practice is the only way to increase your comfort level and reliance in sketching as a key design tool.

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Use posture variations, facial emotions and objects to communicate a wide range of actions and situations. Adapted from Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton, Sketching User Experiences: The Workbook, 2011.

Enhancing Sketches - Annotations, Arrows and Notes

Sketches must rely on the written word to convey their meaning in full. Your sketches and accompanying text must communicate your entire design rationale to you and your team. All the following elements play their part in explaining your sketches and the objects, actions and emotions they represent.

• Annotations - These are names, labels and explanations located next to different parts of a sketch to expand and clarify the meaning of any element depicted. Tie annotations to different elements in your sketch using arrows, braces, numbering and spatial proximity. Write your annotations using a different colour that contrasts with the sketch proper.
• Arrows - Apart from pointing to specific elements in a sketch, use arrows to illustrate interaction flow, a sequence of events, movement and direction.
• Notes - Any text, long or short, that provides additional insight into your sketch is a note. Use notes to:
  • provide detailed explanation of the action or sequence illustrated
  • describe an idea derived from an illustration
  • list unresolved issues
  • explore design elements not depicted in the sketch
  • clarify the purpose of each element you present, specially non-static ones
  • keep a record of your thought process when you first draw a sketch

Author/Copyright holder: Yandle. Copyright terms and licence: CC BY-SA 2.0

Annotations, arrows and notes increase the communicative power of your sketches.

Sketching Methods

You can also use sketching as a collection method. Use sketching to capture the ideas and/or designs you encounter in your daily activities. Other people's designs are concrete examples of solutions posed to challenges under different constraints. Add them to your knowledge bank to remix, influence, inspire or steer your own ideas in different and perhaps unexpected and innovative directions. To help you in this process, we introduce below two simple approaches to collecting virtual and real-life designs.

1. Scribble Sketching

The idea behind this sampling technique is to capture, as fast as possible and with the broadest of strokes, the essence of the object, design or action we are trying to preserve. Leave out non-important details, decorations, text and other non-essential elements. Include textual annotations (see previous section) in your scribble sketches to clarify functionality.

Author/Copyright holder: Espen Klem. Copyright terms and licence: CC BY 2.0

Capture with "broad strokes" the essence of the object, design or action you are trying to preserve.

As a designer, you will find it's a great idea to make a habit of always carrying a notebook to keep a record of objects, designs and actions that provoke or inspire you. Since you are the main audience of the scribble sketching technique, don't feel forced to strive for fidelity. You should only provide a level of detail that is good enough to prompt your memory afterwards. Those rough etchings thus become direct touchstones with ideas and also skeletons you can eventually refine into powerful final versions.

2. Sampling with Cameras

The goal of this sampling technique is to use still photos and video to capture some features of the world. You can apply this sampling technique during your weekly grocery shopping, while running your favourite route, on your commute to work, or when you meet friends for dinner. The pervasive nature of smartphones should facilitate this activity. Capture objects, designs and actions that delight, inspire and irritate you.

Record of Failed Design Efforts

Use the two sampling techniques described to keep a record of failed design efforts. Gather objects and situations that annoy you. Write down the reasons behind this negative effect. This exercise will help you develop a critical eye. A critical eye will allow you to identify even the shortcomings of your own work. In doing so, you will develop and show more sophisticated design skills.

Record of Successful Design

You should also use the sampling techniques mentioned to keep a record of successful design. They will help you draw inspiration from multiple domains to ground your design work on features other than those of the digital realm.

The Take Away

Sketching is a time-tested approach to propose, explore, refine and communicate your design ideas. Sketching should be your first line of attack when faced with a new design challenge. Unlike prototypes, you should produce sketches in abundance, on a very low budget and with just the right amount of detail in the early stages of the design process. Use sketches to explore multiple design directions simultaneously. Refine your chosen design with the standard tools of usability engineering to ensure it satisfies all relevant requirements. Sketch, sketch, sketch!

References & Where to Learn More

Bill Buxton, Sketching User Experiences: Getting the Design Right and the Right Design, 2007

Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton, Sketching User Experiences: The Workbook, 2011

Tohidi, M., Buxton, W., Baecker, R. & Sellen, A., Getting the Right Design and the Design Right: Testing Many Is Better Than One Proceedings of the ACM-SIGCHI Conference on Human Factors in Computing Systems (p. 1243–1252), 2006: http://www.billbuxton.com/rightDesign.pdf

Drawing Ideas a Hand-drawn Approach for Better Design Pdf Download

Source: https://www.interaction-design.org/literature/article/etch-a-sketch-how-to-use-sketching-in-user-experience-design

Share this post