sketching_basics_realworld

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:

  • Pencil
  • Sketchbook
  • Watch that counts in seconds (timer)

You do:

  1. Look at a screenshot of the application or photograph of the device.
  2. Start your timer.
  3. Sketch the application within 30 seconds sharp.

Tool Support:

  • iPad App: Scribble (Lite)

  • Android App: Draw and Share

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.

XING "to top" button scribble

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:

  • Digital camera. Preferably including video capabilities.

You do:

  • Take pictures of things that
    • irritate:
      Things that are unhandy, inefficient or difficult to understand. Take them as negative examples of how not to do it and check if your own software might include similar irritations.
    • impress with their design:
      Devices or user interfaces that solve problems by their design better than your own or other products you know.
    • inspire:
      Everything that took your attention or that you simply considered as beautiful, such as a particular combination of colors or shapes. They can be also inspiring for your new user interface.

Tool Support (quick editing, adding annotations):

  • iPhone / Android App: PicsArt Photo Studio
  • MS Windows: Paint.net

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.: Flexible container for physical items.

Folders with printed copies:

sketching_basics_realworld.txt · Zuletzt geändert: 2018/12/03 09:43 (Externe Bearbeitung)