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

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

3. 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

4. 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

5. Slide by James Landay Low-fidelity Sketches

6. Slide by James Landay Low-fidelity Sketches

7. 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

10. 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)

11. 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

12. 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

13. Slide by James Landay Quickly Sketch this...

14. Slide by James Landay Add Behavior...

15. Slide by James Landay Transform it to this...

16. 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

17. Slide by James Landay SILK Sketching Interfaces Like Krazy

18. 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

19. 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?

20. 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

22. 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

23. Slide by James Landay Video

24. Contrast l Information Architecture l Navigation Structure

25. Form Groups for A7