SIMS 202 Information Organization and Retrieval Prof. Marti Hearst and Prof. Ray Larson UC Berkeley SIMS Tues/Thurs 9:30-11:00am Fall 2000

Today l Designing with informal user interfaces l Sketching user interfaces electronically –Why do it –Practice using DENIM l Form groups for assignment 7

Why Do We Prototype? l Get feedback on our design faster –saves money l Experiment with alternative designs l Fix problems before code is written l Keep the design centered on the user

Slide by James Landay Fidelity in Prototyping l Fidelity refers to the level of detail l High fidelity ? –prototypes look like the final product l Low fidelity ? –artists renditions with many details missing

Slide by James Landay Low-fidelity Sketches

Slide by James Landay Low-fidelity Sketches

Slide by James Landay Low-fi Storyboards l Where do storyboards come from? –Film & animation l Give you a “script” of important events –leave out the details –concentrate on the important interactions

Slide by James Landay Drawbacks of Current Tools l Require specification of lots of detail –must give specific instance of a general idea »e.g., exact widgets, fonts, alignments, colors –designers led to focus on unimportant details –evaluators focus on wrong issues l Take too much time to use –poor support for iterative design »sketched interface took 5 times longer with traditional tool (no icons)

Slide by James Landay Informal UIs for Early Stage UI Design – “Design Exploration Phase” l Brainstorming –put designs in a tangible form –consider different ideas rapidly l Incomplete designs –do not need to cover all cases –illustrate important examples l Present several designs to client

Slide by James Landay Goal of Research in Informal UI Design Tools l Allow designers to –quickly sketch interface ideas –test these ideas with users –transform to a more finished design without reprogramming

Slide by James Landay Quickly Sketch this...

Slide by James Landay Add Behavior...

Slide by James Landay Transform it to this...

Slide by James Landay Paper Sketches l Advantages –support brainstorming –do not require specification of details –designers feel comfortable sketching l Drawbacks –do not evolve easily –lack support for “design memory” –force manual translation to electronic format –do not allow end-user interaction

Slide by James Landay SILK Sketching Interfaces Like Krazy

Slide by James Landay Designing Interfaces with SILK 1) Designer sketches ideas rapidly with electronic pad and pen –SILK recognizes widgets –easy editing with gestures 2) Designer or end-user tests interface –widgets behave –specify additional behavior visually 3) Automatically transforms to a “finished” UI

Slide by James Landay Specifying Behaviors l Storyboards –series of rough sketches depicting changes in response to end-user interaction l Expresses many common behaviors beforeafter Sequencing behavior between widgets?

Slide by James Landay SILK Storyboards l Copy sketches to storyboard window l Draw arrows from objects to screens Switch to run mode to test SILK changes screens on mouse clicks

Slide by James Landay DENIM: Designing Web Sites by Sketching l Early-phase information & navigation design l Integrates multiple views –site map – storyboard – page sketch l Supports informal interaction –sketching, pen-based interaction

Slide by James Landay Video

Contrast l Information Architecture l Navigation Structure

Form Groups for A7