Please enable JavaScript.
Coggle requires JavaScript to display documents.
E-Lecture 5: Sketching & Storyboarding (Sketching (a. Sketching &…
E-Lecture 5: Sketching & Storyboarding
Learning objectives
a. Outline the role that sketching takes in the interaction design process
b. Distinguish different kinds of sketching
c. Explain the use of storyboards
Sketching
a. Sketching & process (Gathering requirements (not), Designing alternatives, prototyping, evaluating)
Sketching helps with at least three of the four stages in the interaction design process
It helps you with designing alternatives
It helps you with prototyping
And it helps you with evaluating
b. Why Sketch? (Not drawing but designing, idea generation, design elaboration, engineering)
Many people worried that because they no good at drawing, they gonna be no good at sketching
But sketching is not about drawing. It’s about designing a product or system
Sketching is a critical part of process that begins with idea generation (the technical term for this is ideation) to design elaboration, design choices and ultimately to engineering
c. Sketching Vocabulary
In order to become skillful at sketching, it useful to learn some basic sketching techniques
You can start with some basics like lines, rectangles, triangles and circles
And it's useful to add to your repertoire various checkboxes and buttons and even make use of cliparts
d. Composing Objects
By combining these basic sketch elements, you can compose a variety of shapes and objects that perform part of your sketching vocabulary
Here are the selections of documents, papers, books, photos and files
i. People
Interaction Design is about the interaction between objects and people
So it’s likely that many of your sketches are going to involve people
And generally speaking, simple stick figures are preferable to complex drawing
You might even want to use comics light sketches or abstract shapes to represent your people.
The choice of drawing style depends mainly on your personal preference
ii. Postures
Different postures could also show the states of the person
Surprised, puzzled, disgruntled. Here symbols would been placed above the head of the person as an additional indicator of their state
iii. Faces
By combining different mouth expressions with different shapes of eyebrows, you can get a whole range of expressions for different states
iv. Photo Traces (-photograph -trace -save -use)
Tracing is a very useful technique for sketching. It’s particular good if like me, you’re not very good at drawing. Tracing is very simple
You take a photograph of an object, it might be a person or part of a person, or it might be a table, or it might be the technology that you’re interested in designing
You then save just the trace of the object and then you can reuse it as part of your sketches
There are plenty of apps and applications that would help you do this or you can do the old-fashioned with the transparency and a pen and trace over a physical photographs
e. Sketching Tips (4 tips) (-simplicity -icons -3D not needed - Sketch fast, long strokes)
The first one is keep it simple. Try to simplify sketch objects to the minimum necessary detail.
The second one is make use of icons. Icons can be a good source of inspiration to simple shapes representing objects
The third tips is 3D is not usually necessary
And the last one is use fast, long strokes
Not Art (“Sketches do not have to be pretty, beautiful, or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them.” Greenberg et al. 2011)
It’s important to understand that sketches are not meant to be works of arts. As Greenberg puts it “Sketches do not have to be pretty, beautiful, or even immediately understandable by others. However, you should be able to explain your sketches and ideas when anyone asks about them.”
Ideation
a. Getting the design right (Generate an idea, Iterate and develop it)
The process of getting the design right is the process of generating ideas
You can think of it as a process of climbing a hill, you generate an idea and you improve upon it to get an idea that further up the hill, the best idea is at the peak
Local hill climbing Problem
The problem of this approach is that the best idea is only best relative to that idea you first started with
This is known as the problem of “Local Hill Climbing” with the local maxima is potentially much less than the optimal global maxima
b. Getting the right design (-Getting the design right, -Getting the right design)
a. Buxton contrast the process of “Getting the design right” which suffered from the “Local Hill Climbing Problem” with the process of getting the right design
b. The Design Funnel (Graph available on e-lecture)
Hugh illustrated the process of getting the right design as the process of elaboration , where you regenerate possible solutions and reduction where you eliminate those ones that are not worth pursuing
The process is then repeated again and again to form what he called the “Design Funnel”
For each iterations, the ideas are considered in finer and finer details
Storyboards
a. What is it?
The real values of sketching become apparent when you use them to tell a story
What makes interaction design unique is that it imagines a person’s behaviour as he or she interacts with the system over time
Storyboards capture this element of time as a series of discrete images that visually narrates what’s going on scene by scene
The simplest storyboards present snapshots of the user interface
But the interfaces only part of the story that occurs as people interact, what is missing is context
The narrative storyboard provides this context, it uses a sequence of images to tell a more complete story about people interaction over time
You’ve probably met a narrative storyboard if you ever read a comic
b. Narrative Storyboards
i. Example of Narrative Storyboards
This example shows the beginning of the storyboard consisting of a sequence of 5 sketches involving people interacting with an IR tag
By using their phone to scan the tag, they’re able to see the picture through each scene
ii. Two different types of storyboards,
the sketching storyboard and
the photos storyboard
Narrative storyboards (techniques for Narrative storyboards - sketching -photos)
Sketching Storyboards
The storyboard should begin with the sequence of empty frames
Then you begin the story with the beginning, a middle and an end
Create sketches for each of your frames thinking of the most camera angles in a film
You need to emphasis actions and motions
Finished storyboards (images on e-lectures)
Photo storyboards
Photo storyboards start with the series of snapshots
You can then edit the photographs to make them look clearer and add annotations in an annotation app or or you can do the analogue way and print out your photographs then write on them with a pen as shown here v