HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow
Upcoming SlideShare
Loading in...5
×
 

HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow

on

  • 129 views

UI Design: layout, actions & editing patterns. Flow. For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

UI Design: layout, actions & editing patterns. Flow. For other details, visit http://profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html

Statistics

Views

Total Views
129
Views on SlideShare
129
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow HCI 2014 (5 of 10): UI Design. From Design Patterns to Flow Presentation Transcript

    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Human-Computer Interaction from design patterns to flow
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “It is not the answer that enlightens, but the question.” Eugene Ionesco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco How to present the content to convey meaning, sequence, and points of interaction?
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design patterns layout
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual framework Jenifer Tidwell, 2005 assure the use of layout, color and visual style in a consistent manner
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual framework must be flexible regarding the visual design, depending on the presented content
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Visual framework example: visual consistency of the traditional applications and Web sites
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Center stage Jenifer Tidwell, 2005 most important part of the UI is located in a center zone, grouping additional tools in small-size areas
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Center stage designed by using: size color headlines context
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Center stage it could be used in conjunction to other design patterns – e.g., for Web navigation
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Card stack Jenifer Tidwell, 2005 content sections are placed on different panels (cards) that can be stacked only one card is visible at a given moment
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Card stack usually, labeled – horizontal/vertical – tabs are used the meaning of each label is important
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Closable panels Jenifer Tidwell, 2005 placing the content in separate labeled containers that could be expanded
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Movable panels Jenifer Tidwell, 2005 put different tools or sections of content onto separate panels, and let the user move them around to form a custom layout
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Movable panels users have liberty to rearrange their workspace
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Movable panels there are situations when it could be inconvenient why?
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Right/left alignment Jenifer Tidwell, 2005 permits alignment of the content within a form/table labels must be right aligned fields must be left aligned
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion …good or bad design?
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Right/left alignment in certain cases, it could be substituted by other design patterns
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Diagonal balance Jenifer Tidwell, 2005 arrange page elements in an asymmetric fashion, but balance it by putting visual weight into both the upper-left and lower-right corners
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Diagonal balance “Asymmetrical layouts can achieve equilibrium as well, but their tenser, more dramatic form of balance depends on careful manipulation to compensate visually for differences in the size, position, and value of major elements.” Kevin Mullet & Darrell Sano
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Property sheet Jenifer Tidwell, 2005 presenting specific properties of an object usually, a two-column layout or a form are used
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Liquid layout Jenifer Tidwell, 2005 permits content regrouping when the presentation area is resized
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Liquid layout in the case of traditional applications, it could be facilitated by the layout managers
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Liquid layout multi-device context  responsive Web design
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco responsive Web design adapting the design to a certain interaction context (e.g., screen orientation, resolution, pixel density,…) by using different Web techniques Ethan Marcotte, 2010 www.alistapart.com/articles/responsive-web-design/ discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion media queries flexible image (+media) flexible or fluid grid Jacob Surber, The Page Is Dead, SXSWi 2012 http://www.slideshare.net/jacobsurber/page-death
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion various screen resolutions using different CSS properties via @media rules @media screen and (max-width: 768px) and (orientation:portrait) { /* styles for tablets*/ }
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco flexible images & other media – e.g., videos adaptive sizing and/or vectorial fonts & graphics (SVG) examples: http://mediaqueri.es/ discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco flexible layouts use relative width columns to organize the content grid templates: 960.gs, cssgrid.net, goldengridsystem.com discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion responsive Web design other strategies use relative CSS measure units (% em rem) linearize the content in a mobile context hide (remove) non-essential data set the viewport to the real size of the device’s screen <meta name="viewport" content="width=device-width, initial-scale=1" /> see also http://zite.to/13Dd5DU
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco graceful degradation progressive enhancement responsive Web design mobile first Aaron Gustafson – http://www.slideshare.net/AaronGustafson discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco http://bradfrost.github.com/this-is-responsive/patterns.html responsive Web patterns (layout, navigation, content, forms,…)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design Patterns user actions & commands
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco UI offers to its users certain controls each action that could be performed by user must be consequently indicated
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco UI offers to its users certain controls each action that could be performed by user must be consequently indicated (perceived) affordance Donald Norman, 1998
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Affordances provide strong clues to the operations of things. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing.” Donald Norman www.interaction-design.org/encyclopedia/affordances.html
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco There must be a logical reason for using an interaction control
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls inspired by reality Dan Saffer switch, dial, button, latch, slider, handle
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls physical only joystick, trackball, Wiimote, data glove,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls digital only scroll bar, checkbox, radio button, text box, listview, spinner etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interaction controls “invisible” e.g., Kinect, LeapMotion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Button groups Jenifer Tidwell, 2005 to present related actions as a small cluster of buttons, aligned either horizontally or vertically see Gestalt principles
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Button groups we must create several of them if there are more than 3—4 actions remember Hick’s Law
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Button groups must be consistently placed within the UI
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Prominent “done” button Jenifer Tidwell, 2005 place the button that finishes a transaction at the end of the visual flow
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Prominent “done” button this button must focus the user’s attention e.g., make it big and well-labeled usually, the button label is a textual one, easy to be noticed
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Preview Jenifer Tidwell, 2005 shows users a preview or summary of what will happen when they perform an action e.g., printing, committing an on-line purchase etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Preview previews help prevent various errors it could facilitate to explain users some actions
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco desktop
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Web
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco mobile
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator Jenifer Tidwell, 2005 indicating how much progress was made on a time-consuming operation
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator Jenifer Tidwell, 2005 indicating how much progress was made on a time-consuming operation  providing feedback to the user
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator user must be informed regarding the system’s current status e.g., changing mouse cursor, highlighting, progress bar,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator < 0.1 sec (almost) instantaneous 0.1 – 1 sec no feedback is necessary; the user will notice that must wait 1 – 5 sec waiting – e.g., busy cursor >1 – 5 sec showing a progress indicator
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Progress indicator “Display a progress bar that accurately reflects the time remaining. If you cannot predict how much time an operation will take, say so! Do not lie to or misinform users.” Jef Raskin, 2000
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco indeterminate-progress indicator time-remaining progress indicator
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Cancelability Jenifer Tidwell, 2005 provides a way to instantly cancel a time-consuming operation, with no side effects
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Cancelability if there are simultaneous operations, we must indicate what it could be canceled
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco a hard-to-find Cancel operation (Tidwell, 2005)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Multi-level undo Jenifer Tidwell, 2005 it offers a way to easily reverse a series of actions performed by the user
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Multi-level undo undoable operations: entered text, database transactions, layout changes, cut & paste, actions regarding certain resources: images, e-mail messages, etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Command history Jenifer Tidwell, 2005 keeping a visible record of what was done, to what, and when
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Macros Jenifer Tidwell, 2005 defining & executing a sequence (group) of small actions a macro is denoted by a mnemonic
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Macros we must provide a recording mechanism of user actions to be automatically executed another time
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Macros related patterns: Multi-Level Undo Command History
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Design patterns data editing
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco A frequent activity performed by users is to edit data textual, graphical, multimedia (video, sound), etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco WYSIWYG (What You See Is What You Get) desktop publishing raster/vector image editing animation scenes video content …
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco WYSIWYG (What You See Is What You Get) users have some powerful expectations for how a text editor should work
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco OmmWriter Dāna (reported by @alecsandru)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Direct manipulation permits users to “directly” interact with interface objects – by performing operations like grab, push, drag, drop, stack, paint, transform etc. – via some pointing device
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Direct manipulation direct manipulation is immediate actions take place with no apparent wait time
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Direct manipulation direct manipulation is precise users need to have fine control over the location of that pointer and the objects attached to it
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Selection users have certain expectations regarding the selection of different types of entities: (non)formatted text, elements of vector graphics, abstract components, lists, tables, trees, etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Text editors Vector graphics editors, GUI builders Lists, tables, trees Single click Move text insertion cursor here Select just this item Select just this item Double click Select this word Open or edit this item Open or edit this item Triple click Select this line, or select this paragraph N/A N/A Click, drag, release Start selection here, end it there; select all text between them Select everything inside the bounding box (“rubberband”, “marquee” or “marching ants” selection) Drag this item from here to there Shift-click Start selection at the text insertion cursor, end it at the click point, and select all text between them Add this item to the selection set Add this item to the selection set, plus all intervening items (“contiguous selection”) Control- click Varies from application to application Varies from application to application Add this item to the selection set (“dis- contiguous selection”) Tidwell (2005)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Selection regularly, selection of discrete elements is done by using handles
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Edit-in-place Jenifer Tidwell, 2005 offers a minimalist editor directly in the place where the user could modify a textual data
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Edit-in-place used to edit files/objects names, labels, values of properties,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Smart selection Jenifer Tidwell, 2005 making the software smart enough to automatically select a coherent group of items, rather than making the user do it examples: text elements, pixels, file names,…
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Smart selection when done thoughtlessly, smart selections can be irritating  anti-pattern
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Composite selection Jenifer Tidwell, 2005 permits a global selection for a group of entities
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Composite selection Jenifer Tidwell, 2005 use different gestures or mouse clicks in different screen areas, such as the composite’s edges versus its insides to determine whether you should select a composite itself or allow its contained objects to be selected
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Spring-loaded mode Jenifer Tidwell, 2005 permitting users to change the mode of interaction by pressing a key or a certain mouse button
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Spring-loaded mode typical keys: Shift Alt Ctrl
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Constrained resize Jenifer Tidwell, 2005 supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Magnetism Jenifer Tidwell, 2005 making the objects “magnetic” to the things a user positions them against when the user drags an object very near one of these things, it should stick
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Magnetism it helps compensate for users’ lack of perfect dexterity with a pointing device – typically, the mouse
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Magnetism example: Snap to grid – Adobe Photoshop
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Guides Jenifer Tidwell, 2005 it provides horizontal and/or vertical reference lines in order to facilitate the alignment of certain entities
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Guides guides make it easier for a user to see that alignment is pixel-perfect
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Paste variations Jenifer Tidwell, 2005 offers special functionalities – e.g., format conversions – for the paste operation
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Paste variations typical example: Paste Special – Microsoft Office
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Interacting with software & hardware
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices physical experience user/device direct manipulation, gestures, surfaces, senses, emotions
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices example: mobile devices are handheld and the relationship with the hands is a fundamental character of the interaction Marco Susani, 2008
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert Alan Cooper, 1995
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert no one wants everlastingly to remain a beginner
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert we must persuade the user to become an intermediate
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 1: Humans & devices beginnerintermediateexpert we must persuade the user to become an intermediate why?
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations physical experiencedefining the interaction between humans and objects (devices)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations digital experience, interface, mental model(s) models focused on: communication versus content versus task (functionality)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations different communication paradigms: textual, graphical, natural (e.g., gestural), 3D, mixed etc. typical example: augmented/mixed/virtual reality
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations e-commerce, news & wiki applications are mainly based on a content-centric model several examples: BBC News, TED, Speaker Deck, Vimeo, Wikipedia
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations traditional desktop or mobile applications are task-centric typical examples: operating systems, various utilities
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 2: Mental models + their representations traditional desktop or mobile applications are task-centric a possible design solution: task-oriented menu
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 3: Context interaction with(in) physical/virtual environment “smart” objects, ubiquity, (pro)active agents, simulations
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities (a)synchronous communication environments audio, text, multimedia, 3D typical examples: instant messaging, social networks, MMORPGs
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities social behaviors mediated by the technology
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities social behaviors mediated by the technology intimate vs. tribal vs. viral P2P chat vs. forum vs. addictive online games
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities humans are social animals
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities humans are social animals people we need (Mart Murdvee, 2006): teenagerfriend, entertainer business-oriented personsecretary in spare timetrainer/instructor elder personnurse, helpmate
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 4: Communities nowadays, we have the possibility to interact to interface agents having the role of… e-secretary – “digital butler” (Nicholas Negroponte, 1995) + e-entertainer, e-nanny, e-pal, e-trainer, e-librarian, e-clerk, e-attendant(s) etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 5: Content world-wide public access to the data, information, knowledge creating/publishing/mixing the content
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Sphere 5: Content interactive experience at the level of ecosystem: social, spatial, business, regarding the knowledge,… (micro)blogging, wikis, (geo)tagging, content management systems, mash-ups, online gaming, virtual environments etc.
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Necessity focusing – manipulating – the user’s attention
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Remark: keeping a user happy may, therefore, not only affect satisfaction, but may also lead to efficiency and creativity
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco user interaction (Desmet, 2002; van Gorp, 2006) value – pleasant vs. unpleasant arousal – anxiety vs. boredom
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Within interaction, related emotional states must be connectedflow
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow the mental state of operation in which a person in an activity is fully immersed in a feeling of energized focus, full involvement, and success in the process of the activity
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow the global sentiment experienced by a person when (s)he is totally involved into a certain activity optimal experience
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow the global sentiment experienced by a person when (s)he is totally involved into a certain activity excitement (arousal)flowcontrolrelaxation boredomapathyapprehensionanxiety optimal experience
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Anxiety, Boredom and Flow (Csikszentmihalyi, 1990; van Gorp, 2006)
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow autotelic work Csikszentmihalyi, 1990 refers to “work” that is experienced as enjoyable and is associated with flow or optimal experience characterized by a sense of well being and harmony with one’s surroundings
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Flow autotelic work Csikszentmihalyi, 1990, 2008 identifying and designing the motivational affordances in the task and work environment www.ted.com/talks/mihaly_csikszentmihalyi_on_flow.html
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco Negative example: providing feedback that is perceived as controlling rather than informative tends to reduce intrinsic motivation Deci, Ryan & Koestner, 1999; Szalma & Hancock, 2008 discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco discussion
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco “Conclusion” layout, actions & editing patterns and flow
    • Master on Software Engineering :: Human-Computer Interaction Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco next lecture: design patterns for social interactions