Class Notes (838,818)
Canada (511,110)
York University (35,521)
ITEC 3230 (10)


76 Pages
Unlock Document

Information Technology
ITEC 3230
Sotirios Liaskos

INTERFACES AND INTERACTIONS 1 O VERVIEW  The Design Process  Conceptual Model  Metaphors  Interaction Types  Instructing  Conversing  Manipulating and Exploring  Interface Paradigms  80s command line  90s GUI/WIMP  Web Based  Modern Mobile F ROM PROBLEM TO DESIGN  Having a good understanding of the problem space can help inform the design space e.g., what kind of interface, behaviour, functionality to provide  Requirements: A set of functional goals for the system i.e. what kinds of tasks the users want to perform A set of usability goals that are most important for the particular case. A set of experience goals that are relevant to the system.  Next step: define the conceptual model “a high-level description of how a system is organized and operates.” (Johnson and Henderson, 2002, p. 26) How the users will understand the system. How the designers themselves will understand the system. W HAT IS AND WHY NEED A CONCEPTUAL MODEL ?  Not a description of the user interface but a structure outlining the central idea as well as the concepts and the relationships between them.  Why not start with the nuts and bolts of design?  Architects and interior designers would not think about which colour curtains to have before deciding where the windows will be placed in a new building  Enables “designers to straighten out their thinking before they start laying out their widgets” (p. 28)  Provides a working strategy and a framework of general concepts and their interrelations H ELPS THE DESIGN TEAM Designers focus on how the conceptual model will be understood by users. Prevents focusing on details too early. Establish a set of common terms they all understand and agree upon. Reduce the chance of misunderstandings and confusion arising later on. M AIN COMPONENTS OF A CONCEPTUAL MODEL Major metaphors and analogies that are used to convey how to understand what a product is for and how to use it for an activity. Concepts that users are exposed to through the product The relationships between the concepts e.g., one object contains another The mappings between the concepts and the user experience the product is designed to support A CLASSIC CONCEPTUAL MODEL : THE FIRST SPREADSHEET APP (1979)  Metaphor:  The ledger sheet  Concepts:  Columns, rows, totals  Interactive and computational  Effect:  Intuitive: accountants would get it immediately  Greatly extending what accountants and others could do ANOTHER CLASSIC  8010 Star office system targeted at workers not interested in computing  Spent several person-years at beginning working out the conceptual model  Simplified the electronic world, making it seem more familiar, less alien, and easier to learn Johnson et al (1989) THE STAR INTERFAC(1981) INTERFACE METAPHORS  Designed to be similar to an aspect of a physical entity but also has own properties. e.g. “desktop”, search “engine”, “folder”, “recycle bin”  Exploit user’s familiar knowledge, helping them to understand unfamiliar aspects of the interface  Also: people find it easier to learn and talk about what they are doing at the computer interface in terms familiar to them. BENEFITS OF INTERFACE METAPHORS Makes learning new systems easier. Helps users understand the underlying conceptual model. Can be innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users. P ROBLEMS WITH INTERFACE METAPHORS (N ELSON , 1990)  Break conventional and cultural rules  e.g., recycle bin placed on desktop  Can constrain designers in the way they conceptualize a problem space  Conflict with design principles  Forces users to only understand the system in terms of the metaphor  Designers can inadvertently use bad existing designs and transfer the bad parts over  Limits designers’ imagination in coming up with new conceptual models INTERACTION TYPES /STYLES  Instructing  issuing commands using keyboard and function keys and selecting options via menus  Conversing  interacting with the system as if having a conversation  Manipulating  interacting with objects in a virtual or physical space by manipulating them  Exploring  moving through a virtual environment or a physical space  Most interfaces allow for a combination of those styles e.g. instructing and conversing. INSTRUCTING Where users instruct a system by telling it what to do e.g., tell the time, print a file, find a photo Very common interaction type underlying a range of devices and systems A main benefit of instructing is to support quick and efficient interaction good for repetitive kinds of actions performed on multiple objects INSTRUCTING A VENDING MACHINE How are the conceptual models different? C ONVERSING Like having a conversation with another human. Differs from instructing in that it more like two-way communication, with the system acting like a partner rather than a machine that obeys orders. Ranges from simple voice recognition, menu- driven systems, set-up “wizards” to more complex ‘natural language’ dialogues Examples include search engines, advice- giving systems and help systems M ANIPULATING  Exploit’s users’ knowledge of how they move and manipulate in the physical world  Virtual objects can be manipulated by moving, selecting, opening, and closing them.  E.g. diagram editors or CAD systems  More advanced: tagged physical objects (e.g., bricks, blocks) that are manipulated in a physical world (e.g., placed on a surface) can result in other physical and digital events  Proposes that digital objects be designed so they can be interacted with analogous to how physical objects are manipulated.  Assumes that direct manipulation interfaces enable users to feel that they are directly controlling the digital objects. E XPLORING  Involves users moving through virtual or physical environments  Examples include:  3D desktop virtual worlds where people navigate using mouse around different parts to socialize (e.g., Second Life)  CAVEs (Cave Automatic Virtual Environment) where users navigate by moving whole body, arms, and head in an environment simulated using projectors.  Physical context aware worlds, embedded with sensors, that present digital information to users at appropriate places and times A VIRTUAL WORLD A CAVE INTERFACE PARADIGMS Refers to a particular approach that has been adopted by a community in terms of shared assumptions, concepts, values and practices. It is like fashion: it is based on decades! P ARADIGMS IN HCI  The predominant 80s paradigm was to design user- centred applications for the single user on the desktop  Shift in thinking occurred in the mid 90s  Many technological advances led to a new generation of user–computer environments  e.g., virtual reality, multimedia, agent interfaces  Effect of moving interaction design ‘beyond the desktop’ resulted in many new challenges, questions, and phenomena being considered INTERFACE TYPES 1980s interfaces Command WIMP/GUI 1990s interfaces Advanced graphical (multimedia, virtual reality, information visualization), Web Interfaces, Speech (voice) , Pen, gesture, and touch, Appliance 2000s interfaces Mobile, Multimodal, Shareable, Tangible, Augmented and mixed reality, Wearable, Robotic COMMAND INTERFACES Commands such as abbreviations (e.g., ls) typed in at the prompt to which the system responds (e.g., listing current files) Some are hard wired at keyboard, e.g., delete Efficient, precise, and fast. Allow scripts, batch execution and pipelines. Large overhead to learning set of commands RESEARCH AND DESIGN ISSUES Form, name types and structure are key design questions Consistency is most important design principle e.g., always use first letter of command same parameter conventions – linux Can you see Google as a command-line interface WIMP/GUI INTERFACES  Xerox Star first WIMP -> rise to GUIs  Windows  could be scrolled, stretched, overlapped, opened, closed, and moved around the screen using the mouse  Icons  represented applications, objects, commands, and tools that were opened when clicked on  Menus  offering lists of options that could be scrolled through and selected  Pointing device  a mouse controlling the cursor as a point of entry to the windows, menus, and icons on the screen W INDOWS Windows were invented to overcome physical constraints of a computer display, enabling more information to be viewed and tasks to be performed Scroll bars within windows also enable more information to be displayed Multiple windows can make it difficult to find desired one, so techniques used Listing, iconizing, shrinking A PPLES SHRINKING WINDOWS RESEARCH AND DESIGN ISSUES  Window management enabling users to move fluidly between different windows (and monitors)  How to switch attention between them to find information needed without getting distracted M ENUS  A number of menu interface styles flat lists, drop-down, pop-up, contextual, and expanding ones, e.g., scrolling and cascading  Flat menus good at displaying a small number of options at the same time and where the size of the display is small, e.g., iPods but have to nest the lists of options within each other, requiring several steps to get to the list with the desired option moving through previous screens can be tedious E XPANDING MENUS  Enables more options to be shown on a single screen than is possible with a single flat menu  More flexible navigation, allowing for selection of options to be done in the same window  Most popular are cascading ones  primary, secondary and even tertiary menus  downside is that they require precise mouse control  can result in overshooting or selecting wrong options IPOD FLAT MENU STRUCTURE CASCADING MENU LONG MEN…S C ONTEXTUAL MENUS  Provide access to often-used commands that make sense in the context of a current task  Appear when the user presses the Control key while clicking on an interface element (MAC) When right-clicking (Windows) (while on an interface element) e.g., clicking on a photo in a website together with holding down the Control key results in options‘open it in a new window,’ ‘save it,’ or ‘copy it’  Helps overcome some of the navigation problems associated with cascading menus RESEARCH AND DESIGN ISSUES What are best names/labels/phrases to use? Placement in list is critical to ensure safety Quit and save need to be far apart Many international guidelines exist emphasizing depth/breadth, structure and navigation e.g. ISO 9241 ISO9241  More than 8 or so options on a menu  the options must be grouped.  g = sqrt(n)  g: the number of groups  n: the total number of options This has nothing to do with Miller’s Law (remember what that is?) ICON DESIGN  Icons are assumed to be easier to learn and remember than commands  Remember that humans remember images easier  Can be designed to be compact and variably positioned on a screen  Now populate every application and operating system  represent desktop objects, tools (e.g., paintbrush), applications (e.g., web browser), and operations (e.g., cut, paste, next, accept, change ICONS  Since the Xerox Star days icons have changed in their look and feel:  black and
More Less

Related notes for ITEC 3230

Log In


Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.