Interaction Structures Mikael Kindborg IDA, LiU 2007-03-26 [email protected] www.ida.liu.se/~mikki/ Outline ● Design levels ● Visualization of part-whole relations ● Comics and context ● Interaction structures Design levels ● Idea, intent, goals ● Users and usability goals ● System services ● Conceptual model ● Interaction structure ● Interaction techniques ● Presentation techniques ● Physical form Cf. PACT Fig. 24-5 p. 600 Context Lexivisual presentation ● The idea of lexivision was pioneered by Sven Lidman, 1972. ● Closely related to comics! ● The technique is used in information graphics and news graphics. ● The power of lexivisual presentation comes from the ability to provide totality and to communicate structure. ● The close integration of text and picture is a key element. Lexivisual principles ● Focus on the primary message (place the primary object in the centre) ● Present information in its context ● Relate details to the whole Comics – a dynamic medium ● Panel strips represent time with space. ● Panels contain characters and contextual signs. ● Voice bubbles are an example of contextual signs. ● Contextual signs turn the comic into something that happens now. ● A comic is something more than a sequence of still images, it is a story that takes place before the reader's eyes. Contextual signs ● Voice balloons ● Onomatopoeic symbols (symbols that imitate sound) ● Motion signs (e.g. speed lines) ● Emotion signs (e.g. pain stars) ● And many others ... Contextual signs in UIs ● The mouse cursor ● Handles ● Window buttons ● Contextual popup menus ● Tool tips ● Halos ● Info bubbles Interaction structures ● Sequential ● Hierarchical ● Network ● Zooming and panning ● Flat with menus ● Pop-up objects ● 3D-worlds Interaction techniques ● Typed commands ● Menus (includes buttons, and links, basically anything that is clickable) Static menus Dynamic menus ● Forms (adds parameters to commands) ● Direct manipulation (drag, drop, size, move, etc.) ● Natural language Widgets ● Widget = Window Gadget ● Gadget = “an often small mechanical or electronic device with a practical use but often thought of as a novelty” ● Examples include: windows, dialogue boxes, buttons, radio button, check boxes, menus, tool bars, list boxes, text fields, scroll bars, ... ● Follow the User Interface Guidelines for your OS! Design experiment ● Design alternative user interfaces for an information system about a planet. ● Try to come up with as many interaction structures and visualisations as possible – also use comic book techniques! ● The planet has information about places. ● Each place has a name, a picture and text that provides information. ● How is the usability for the different designs, e.g. the sense of overview?