← Back to Sketching Basics overview
Sketching Basics: Starting with the real world
Sampling the real world might help you with developing new ideas, by gathering already existing things. This tutorial introduces some techniques which help you to understand existing systems and to realize important points which you might also consider in your own prototypes later.
Identify key features: Scribble Sketching
Imagine you have seen some sort of device or computer application that you might want to develop further. Then it is a good idea to use scribble sketching.
How it works
You need:
You do:
Look at a screenshot of the application or photograph of the device.
Start your timer.
Sketch the application within 30 seconds sharp.
Tool Support:
Examples
Let's say we observed a pretty innovative way of showing a „to top“ button on a website. In this case it is xing.de. They show a button at the bottom right corner, but only when you scroll down enough, i.e. only when it actually makes sense to have such a button. Since we might reuse this idea for our own web application, we create a quick scribble in Microsoft OneNote with an annotation.
Another example scribble has been done with the iPad App „Scribble Lite“. The strokes are more exact than with the mouse pointer. The example shows a scribble of the university's e-mail web client „SOGo“. When scribbling, you can realize that the application makes use of many panels and boxes which you might avoid in your own application in order to not confuse the user with too much information.
Benefits
Due to the very limited time, you will automatically focus on the most important features. Design elements are omitted, such as icons, irrelevant text messages or decorations.
You can do it anywhere, anytime - as long as you have something to draw with you. Hence, you can use scribble sketching as a method of reminding nice things that you spontaneously see somehwere.
Supports the evaluation of many different systems or devices. E.g., while you look at different user interfaces, you can immediately sketch the key features and compare them later.
Becoming a hunter and gatherer: Sampling with cameras
You most probably have a mobile phone with integrated camera. Use it for sampling the real world: Take photographs of everything that you notice and might be relevant to your work. These can be both positive or negative things.
How it works
You need:
You do:
Tool Support (quick editing, adding annotations):
Examples
This is a photo taken on the way home in the train.
It shows the departure time, current time and next stops of the train.
The picture is taken because it was inspiring for the author in the following ways:
The used color scheme looks clear, nice and lets identify all elements immediately.
The screen contains the minimum amount of information which you need as traveler. Sometimes, such kind of screens contain too much information, such as connection trains, advertisements or graphical elements which make the actual text difficult to read.
The dotted line makes it clear that the list of stops is not complete, but that there are more stops in between. That is a nice visualization which is often missing.
You could take this screen and check if you could reuse some elements of it in your own application.
Another photo is actually a screenshot of the iPad Scribble Lite App, which has an irritating feature: Try to find out how to create a new scribble by looking at the available options.
The solution is to misuse a button with a different function: You need to select another background image. This will lead to a new blank screen in the selected color. The previous scribble gets deleted without any warning or user confirmation.
Based on this experience, you might keep in mind for your own application:
Provide a separate and clearly label button for each basic operation (e.g. „New“)
If an operation deletes existing work, let the user confirm the consequence.
Benefits
No sketching skills required.
Your collection of photographs can be a rich source of ideas.
Good practice for observing the world.
Pictures hold clues about what to do or even what to avoid.
Building collections
The important point of „sampling the real world“ is to collect as many things as you can do and archive them.
You can build collections in the following ways:
Digital Archives:
Store digital files (such as photographs, scanned scribbles, images) into folders. Tools, such as Microsoft OneNote might help you.
Shoe Boxes or Physical File Folders:
Keep printed copies, pictures from newspapers or other physical objects in show boxes or actual folders. Benefit: It is harder to forget or overlook physical objects than digital files on the computer.
Sketchbook:
Scribble directly into a scrapbook and paste collected pictures into it. This allows easier annotations and usually involves deeper studying of the pictures due to the process of cutting and pasting them.
Toyboxes:
Collect real physical objects, such as toys, tools, etc. You can store them in your desk, in cardbox boxes, containers or in a display. This, of course, depends on your available space.
Examples:
Flexible container for physical items.:
Folders with printed copies: