Lecture 10: Interface Types

Lecture 10: Interface Types

1. 1. command-based

   • command such as abbreviations (eg. Is) typed in at the prompt to which the system responds (eg. listing current files); some are hard wired at keyboard, others can assigned to keys; efficient, precise & fase; large overhead to learning set of commands
   • second life command-based interface for visually impaired users
   • research & design issues [form of commands (eg: abbrieviations, full names, familiar names), syntax (how best to combine diff commands) & organization (how to structure options) are key research issues; consistency is the most important]

2. 2. WIMP & GUI

   • Xerox Star first WIMP > rise to GUIs
   • Windows
     • could be scrolled, stretched, overlapped, opened, closed & moved around tthe screen using the mouse
     • Windows were invented to overcome physical constraints of a computer display [enable more info to be viewed & tasks to be performed]
     • scroll bars within windows also enale more info to be viewed
     • multiple windows can make it difficult to find desored one [listing, iconising, shrinking are techniques that help]
     • research & design issues [windoe management [enable users to move fluidly btwn diff windows & monitors]; design principles of spacing, grouping, & simplicity should be used
   • Icons
     • represented applications, objects, commands & tools that were opened when clicked on
     • icon design [icons are assumed to be easier to learn & rmb as compared to commands; can be design to be compact and variably positioned on a screen; now pervasive in every interface (eg: represented desktop objects, tools > paintbrush, applications > web browser, operations > cut, paste, next, accept, change)]
     • since Xerox Star days icons have changed in theor look & feel (black & white > color, shadowing, photorealistic images, 3D rendering & animation); many design to be very detailed & animated making them both visually attractive & informative; GUIs now highly inviting, emotionally appealing & fell alive
     • icon forms
       • mapping btwn representation & underlying referent can be similar (eg: pic of a file represent object file), analogical (eg: pic of scissors represent "cut"), arbitrary (X represent "delete")
       • most effective icons are similar ones; many operations are actions making it more difficult to represent them [use a combination of objects and symbols to capture salient part of an action]
     • early icons; newer icons; simple flat 2D icons
     • research & design issues [there is a wealth of resources now so go not have to draw / invent new icons from scratch (eg: guidelines, style guides, icon builders, libraries); text labels can be used alongside icons to help identification for small icon sets; use rollovers for large icon sets (eg: photo editing / word processing)]
   • Menus
     • offering list of options that could be scrolled through & select
     • a number of menu interface styles [flat lists, drop-down, pop-up, contextual & expanding (scrolling & cascading)]
     • flat menus [good at displaying a small number of options at the same time & where the size of the display is small (eg: iPods); but hve to nest the lists of options within each other, requiring several steps to get to the list with the desired options; moving through previous screens can be tedious]
     • expanding menu [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 (primary, 2ndary & tertiary menus; downside is that require precise mouse control; can result in overshooting / select wrong options]
     • contextual menus [provide access to often-used commands that make sense in the context of a current task; appear when user press control key while clicking on an interface element (eg: click on photo in a website tgt with holding down control keyresults in options "open in a new window", "save it" or "copy it"); helps overcome some navigation problem associated with cascading menus]
     • menu design guideline [meaningful grouping, sequencing of menu items, titles & labels, appropriate layout design]
       • item presentation sequence
         • task-related grouping [create grps of logically similar items (eg: in online games, level 1, 2, 3 for beginning, intermediate, expert); form grps that cover all possibilities; make sure items are non-overlapping (eg: "entertainment" & events"); use familiar terminology, but ensure that items are distinct from one another (eg: day/night ; am/pm)]
         • order of items in menu is important & should take natural sequence into account when possible [time (year, month); numeric ordering (ranges of values); physical properties (increasing / decreasing / length / velocity)]
         • when cases have no task-related ordering, designer must choose from such possibilities [alphabetic sequence of terms; gruoping of related items (with blank lines btwn grps); most frequently used items first; most important items first]
       • menu layout
         • titles [use simple descriptive title for single menus; use exact same words in higher-level menu items as in the tiles for next lower- level menu im tree-structured menus (eg: if a menu item is called "Business & Financial Services", the next screen should have that phrase as its title)]
         • phrasing of menu items [use familiar & consistent terminology; ensure that items are distinct from one another; use consistent & concise phrasing; bring keyword to the left (eg: "size of types" vs " set the type size")]
         • techniques [indentation; upper / lower case characters; symbols (* -) to create seperators / outlines; position marker (1 2 3 4)(underline 3); cascading / walking menus
       • response time & display rate
         • the speed at which user can move through menus may determine their attractiveness as an interface mechanism [response time: time taken for system to display info in response to user selction] [display rate: speed of displaying the menus]; user performance & preference favors broader, shallowe menus
       • menu (breadth, depth)
         • depth [no. of levels]; breadth [no. of items per level]
           • limit menu trees to 3-4 levels [depth]; 3-8 items per menu [breadth]
         • breadth / depth trade off, breadth is preferred; when depth (4-5), users lost / disoriented
         • menu depth increase, error & response time increase
       • fast movement through menus
         • 1. menus with keyboard shortcut [important when menu are familiar & response time / display rate are slow]
         • 2. menu names / bookmarks for direct access [simple naming scheme allows users to access pages directly; useful only if there is a small number of possible destinations that users need to rmb; WWW browsers provide bookmarks for quick access to specific pages]
         • 3. tear-off menus [low-level menu need to be used in multiple times in a row]
     • research & design issues [placement in list is critical (eg: "quit" & "save" need to be far apart); menu choice use determined by application & type of system (flat menus are best for displaying small number of options at one time; expanding menus are good for showing a large number of options)]
   • Pointing device
     • a mouse controlling the cursor as a point of entry to the windows, menus & icons on the screen
   • GUIs
     • same basic building blocks as WIPMs but more varied [color, 3D, sound, animation; many types of menus, icons, windows]
     • new graphical elements [eg: toolbars, docks, rolovers]
     • challenge now is to design GUIs that are best suited for tablet, smartphone & smartwatch interfaces

3. 3. Virtual reality

   • computer-generated graphical simulations providing the illusion of participation in a synthetic environment rather than external observation of such an environment; provide new kinds of experience, enabling users to interact with objects & navigate in 3D space; create highly engaging UX
   • research & design issues [research on how to design safe & realistic VRs to facilitate training (eg: flying simulators; help ppl overcome phobias like spider & talking in public); design issus (how best to navigate through them, eg: 1st VS 3rd person; control interactions & movements, eg: use of head & body movements; interact with info, eg: use of keypads, pointing, joystick button; level of realism to aim for engender a sense of presence)]

4. 4. Information visualization & dashboards

   • computer-generated interactive graphics of complex data; amplify human cognition, anabling users to see patterns, trends & anomalies in the visualization; aim is to enhance discovery, decision-making & explanation of phenomena; techniques [3D interactive maps that can be zoomed in & out and which present data via webs, trees, clusters, scatterplot diagrams & interconnected nodes]
   • dashboards [show screenshots of data updated overperiod of time > to be read at a glance; usually not interactive > slices of data that depict current state of a system / process; need to provide digestible & legible info for users (design its spatial layout so intuitive to read when first looking at it; should also direct a user's attention to anomalies / unexpected deviations)]
   • research & design issues [use animation and/or interactivity; form of coding use (color / text label); representational format (2D / 3D); form of navigation (zooming / panning); additional info provide (rollovers / tables of text); navigational metaphor use]

5. 5. Web

   • early websites were largely text-based, providing hyperlinks; concern was with how best to structure info to enable users to navigate & access it easily & quickly; nowadays are more emphasis on making pages distinctive , striking & pleasurable; design info for multi-platforms [eg: smartphones, tablets, PCs]
   • usability vs attractive [ease of finding smth vs aesthetic & enjoyable experience; web designer are thinking great literature; users read the web very fast; need to determine how to brand a web page to catch & keep attention from users]
   • research & design issues [need to consider how best to design, present & structure info & system behaviour; but also content & navigation are central; Veen's design principles: 1) where am I? 2) where can I go? 3) what's here?

6. 6. Consumer electronics & appliances

   • everyday devices in home, public place / car [eg: washing macines, remotes, photocopiers, printers & navigation systems]; personal devices [eg: MP3 player, digital clock, digital camera]; used for short period [eg: putting washing on, watch a program, but ticket, take snapshot]; need to be usable with minimal, if any, learning
   • research & design issues [need to design as transient interfaces with short interactions; simple interfaces; consider trade-off btwn soft & hard controls (eg: buttons or keys, dials or scrolling)]

7. 7. Mobile

   • handhelp devices intended to be used while on the move; have become pervasive, increasingly unsed in all aspects of everyday and working life; apps running on mobiles have gratly expanded [eg: used in restaurants to take orders; car rentals to check in car returns; checking stock in supermarket; support life-long learning in education
   • mobile challenges [smaller screen, small number of physical keys & restricted number of controls; innovative physical designs (roller wheels, rocker diales, up/dowm "lips" on face of phones, softkeys); usability & preference varies (depend on dexteriry & commitment of user); smartphones overcome mobile physical constraints through using multi-touch displays]
   • research & design issues [mobile interfaces can be tricky & cumbersome to use for those with poor manual dexterity / "fat" fingers; key concern is hit area (area on phone display that users touch to make smth happen such as a key, icon, button or app; space needs to be bif enough for fat fingers to press accurately; if too small user may accidentaly press wrong key)]
   • mobile design pattern
     • forms
       • sign-in form [should have a minimal amount of input: username, password, action button, password help, option to register]
       • avoid horizontal labels & should use vertical label [horizontal labels can end up truncated]; buttons have same visual weight
       • calculator form [well-aligned fields & labels are easier to be read]
       • search criteria form [avoid overwhelming user with options, aim for single page of criteria; use appropriate controls that are finger friendly and fast]
       • multi-step form [show user where they are & where they can go; eliminate unnecessary fields & minimize number pf pages & steps]
     • tables & lists
       • avoid using dark gridlines & vertical dividers; left align text & right align numbers; do not overload screen, consider an alternate pattern if there is too much info to fit on a single screen; 3 rows of info per fat row, use smaller & lighter font for less important details
     • search
       • offer clear button in the field & option to cancel search; use feedback to show the search is being performed; minimize number of input fields, implement OS-specific input controls properly; follow form design best practices (alignment, labels, size)
     • feedback
       • error messages [error msg should be expressed in plain language (no codes), precisely indicate the prob & constructively suggest solution; highly visible error msg on screen are preferable to a model dialogue, since a dialog may cover up the issue]
       • system feedback [timely feedback increase user confidence with an application; can be potrayed with a simple msg & animated indicator, a loading bar or combination of elements]
     • affordance [quality of an object that allow individual to perform action]
       • tap [use common visual design techniques to indicate tappable control, but apply 3D effects, extra shadows & bevels can decrease readability]
       • flick [use a page indicator / show edge of next item to provide affordance that flicking will reveal more items; avoid heavy weight scroll bars]
       • drag [use a recognizable icon to handle; consider using an invitation along with drag handle to let users know this feature is available]

8. 8. Speech

   • where a person talk with a system that has a spoken language application [eg: timetable, travel planner]; used most for inquiring about very specific info [eg: flight times / perform a transaction / buy ticket]; also used by ppl with disabilities [eg: speech recognition word processors, page scanners, web readers, home control systems]
   • most popular use of speech interfaces currently is for call routing; caller-led speech where users state their needs in their own words [eg: I'm having problems with my voice main]; idea is they are automatically forwarded to the appropriate service
   • directed dialogs are where the system is in control of the conversation; ask specific question & require specific response; more flexible systems allow user to take the initiative [eg: I'd like to go to Paris next Monday for two weeks]; more chance of error since caller might assume that the system is like a human; guided prompts can help callers back on track [eg: sorry I did not get all that, did you say you wanted to fly next Monday?]
   • research & deesign issues [design system that can keep conversation o track (help ppl navigate efficiently through a menu system; enable them to recover from errors easily; guide those who are vague / ambiguous in their requests for info / services); type of voice actor (eg: male / female / neutral / dialect)]

9. 9. Pen

   • enable ppl to write, draw, select, move objects at an interface using lightpens / styluses [capitalize on wll-honed drawing skills developed from childhood]; digital pens [eg: Anoto] use a combination of ordinary ink pen with digital camera that digitally records everything written with pen on special paper
   • [pros: allows user annotate existing documents quickly & easily]; [cons: can be difficult to see options on screen as user's hand can occlude part of it when writing]

10. 10. Touch

    • touch screens such as walk-up kiosks, detect the presence & location of a person's touch on the display; multi-touch support a range of more dynamic finger tip actions [eg: swiping, flicking, pinchhing, pushing & tapping]; mow used for many kinds of displays [eg: smartphones, iPods, tablets & tabletops]
    • research & design issues [more fluid & direct styles of interaction involving freehand & pen-based gestures; core design concerns include whether size, orientation & shape of touch display affect collaboration; much faster to scroll through wheels, carousels & bars of thumnail images or list of options by finger flicking; more cumbersome, error-prone & slower to type using a virtual keyboard on a touch display than using a physical keyboard]

11. 11. Haptic

    • tactile feedback [apply vibration & forces to a person's body, using actuators that are embedded in their clothing or a device they are carrying like smartphone]; can enrich UX / nudge them to correct error; realtime vibrotactile feedback [provides nudges when playing incorrectly; uses motion capturel nudges are vibrations on arms & hands]
    • research & design issues [where best to place actuators on body; whether use single / sequence of "touches"; when to buzz& how intense; how does wearer feel it in diff contexts; what kind of new smartphones / smart-watches app can use vibrotactile creatively (eg; slow tapping to feel like water dropping that is meant to indicate it is about to rain & heavy tapping to indicate a thunderstorm is looming]

12. 12. Shareable

    • shareable interfaces are designed for >1 person to use [provide multiple inputs & sometimes allow simultaneous input by co-located groups; large wall displayswhere ppl use their own pens / gestures; interactive tabletops where small groups inteact with info using their fingertips; eg: DiamondTouch, Smart Table, Surface]
    • advantages [provide large interactional space that can support flexible group working; can be used by multiple users (can point to & touch info being displayed; simultaneously view the interactions & have same shared point of reference as others); can support more equitable participation compared with groups using single PC]
    • research & design issues [more fluid & direct styles of interaction involving freehand & pen-based gestures; core design concerns include whether size, orientation & shape of the display have an effect on collaboration; horizontal surfaces compared with vertical ones support more turn-taking & collaborative working in co-related groups; privide larger-sized tabletops does not improve grp working but encourages more division of labor]

13. 13. Tangible

    • types of sensor-based interaction where physical objects [eg: bricks] are coupled with digital representations; when a person manipulates physical objects it cause a digital effects to occur [eg: an animation]; digital effects can take place in a number of media & places or can be embedded in the physical objects
    • flow blocks [depict changing numbers & lights embedded in the blocks; vary depending on how they are connected tgt]; urp [physical models of buildings moved around on tabletop; used in combination with tokens for wind & shadows > digital shadows surrounding them to change over time]
    • benefits [can be held in both hands & combined & manipulated in ways not possible using other interfaces (allow for >1 person to explore interface tgt; objects can be placed on top of / beside / inside each other; encourages diff ways of representing & exploring a problem space); ppl r able to see & understand situations differently (can lead to greater insights, learning, & problem-solving than with other kinds of interfaces; can facilitate creativity & reflection)]
    • research & design issues [develop new conceptual frameworks that identify novel & specific features; kind of couling to use btwn physical actions & digital effects (if it is to support learning then an explicit mapping btwn action & effects is critical; if it is for entertainment then can be better to design it to be more implicit & unexpected); physical artifact use (bricks, cubes & other components sets are most commonly used bcuz of flexibility & simplicity; stickies & cardboard tokens can also be used for placing material onto a surface

14. 14. Augmented & mixed reality

    • [augmented reality: virtual representations are superimposed on physical devices & objects]; [mixed reality: views of the real world are combine with views of a virtual environment]; [many applications including medicine, games, flying & everyday exploring]
    • in medicine [virtual objects like X-rays & scans are overlaid on part of patient's body; aid physician's understanding of what is being examined / operated]; in air traffic control [dynamic info about aircraft overlaid on a video screen showing the real planes landing, taking off, taxiing; helps identify planes difficult to make out]
    • augmented map [showing the flooded areas at high water level overlaid on paper map; handheld device is used to interact with entities referenced on the map]
    • research & design issues [digital augmentation (physical environment; need to stand out but not distract from ongoing task; need to be able to align with real world objects); device (smartphones / head up display)]

15. 15. Wearables

    • first developments were head-and-eyewear-mounted cameras that enable user to record what was seen & to access digital info; since jewellery, head-mounted caps, smart fabrics, glasses, shoes & jackets have all been used (provide user with a means of interacting with digital info while on the move)
    • research & design issues [comfort (need to be light, small, not get in the way, fashionable & preferable hidden in clothing); hhygiene (clean / wash the clothing once worn); ease of wear (how easy it is to remove the electronic gadgetary & replace it); usability (how user control the devices that r emedded in the clothing)]

16. 16. Robots & drones

    • 4 types of robots [1) remote robots used in hazardous settings; 2) domestic robots helping around the house; 3) pet robots as human companies; 4) sociable robots that work collaboratively with human & communicate & socialize with them as if they were our peers]
    • drones [unnamed aircraft that controlled remotely & used in a number of context (eg: entertainment > carry drinks & food to ppl at party; agriculture applications such as flying them over wineyards & fields to collect data that is useful to farmers; help to track poachers in wildlife park in Africa); can fly low & stream photos to a ground station, where images can be stitched tgt into maps; can use to determine the health of crop / when it is the best time to harvest the crop]
    • research & design issues [anthropomorphism: how do humans react to physical robots designed to exhibit behaviors (eg: making facial expression) compared with virtual ones?; should robots be designed to be human-like or llok like & behave like robots that serve a clearly defined purpose?; should the interaction be designed to enable ppl to interact with the robots as if it was another human being or more human-computer-like (eg: pressing buttons to issue commands)?; is it acceptable to use unnamed drones to take a series of images or videos of fields, town & private property without permission?]

17. 17. Brain-computer interfaces

    • Brain-computer interfaces (BCI) provide communication pathway btwn a person's brain waves & an external device such as a cursor on screen; person is trained to concentrate on task (eg: moving the cursor); BCIs work through detecting changes in neural functioning in brain; BCIs appls [games (eg: Brainball); enable ppl who r paralysed to control robots]