• University of Manitoba

• COMP 3020  HCI; week 9-13 

Week 9
Gestalt principles are one way to create structure by grouping items physically together in a natural
order with generic information followed by details, required data followed by optional, and present
related objects before ones unrelated. So they leverage properties of perception to create structure.
Hierarchy is created to visually guide the user in scanning for information. So, make necessary changes
to size, position, spacing, and white space to create hierarchy.
To help portray meaning and precision, use alignment (gestalt similarity, proximity)
- Align controls so it is easier to use, navigate, and find.
- Scanning across the gaps is hard, (ex, book chapter and page #) so use leaders (can be limiting),
bring them closer and place commas, delineate using colors (best).
Grids: it can serve as a template to be reused to remain consistent throughout the interface:
grids can be used to align, group related components and organize the screen. There may be multiple,
staggered grids used to design a layout.
Navigation
To make it easy for users to navigate towards their goal, we must keep in mind that although at first, they
make decisions consciously to move forwards but they are making decisions unconsciously as well
because users will draw on their previous knowledge of working with similar systems and leverage those
experiences (whether the designers want them to or not).
So 3 rules of Navigations where we must ensure to minimize cognitive load: Knowing where you are,
Knowing where you are going, and Knowing where you have been.
knowing where you are
In websites:
- it is important to have clear identification since users can enter from anywhere: search result,
someone pointed them to the site
- so headers are important throughout
- breadcrumbs:
o With breadcrumbs a strong hierarchical design is required
especially if there are lots of components/ pages. So, it will bring
them back up to speed if they ended up on the page from an
external link.
o These do not replace main navigation but add more details as a
secondary support.
o You can see you're in clothing, in men's sections and looking at
gloves and mitts. Have links available for the “clothing”, “mens”,
but not for “gloves and mitts” since you are already there.
- breadcrumb abuse:
o hierarchy is not clear, pages belong to many groups
o used when unnecessary- can be cluttering or confusing.
o in applications like: Microsoft word PowerPoints shows you which slide you are on and
what's before and after it.
knowing where you are going (or what will happen)
o use meaningful link/ button descriptions
§ avoid "click here" to do X, instead have X.
o navigation panels should be at the top and/or the left
§ visible even with small devices
§ support left to right reading order
§ hierarchy of page is up front and center!
o don't rely on "search" boxes because users aren't great at formulating queries and give
up
o navigation structures should not dominate content
knowing where you've been (or what you've done)
o establishing where you have been on the web:
§ coloring previously visited links, history lists, back button.
o with deep trees can provide a "history"
o include a way back to a place that as "vantage point"
§ i.e from where the users can reorient themselves if lost.
§ "home" button
- this diagram is useful because it helps in determining if the information from the diagram has
been clearly communicated to the user
- is the hierarchy visible to the users because if it is then it will help in assisting with the 3
navigation goals.
- Typically, it helps function separations but also:
o by roles
o by user types
o by modules in an education system
Navigating hierarchies
- deep is difficult because
o users can get disoriented and there is evident that if it takes any more than 4-5 clicks,
users will give up
o implication: aim for a flat application
- optimal
o many items on each screen (logically related)
§ leads to fewer screens
§ but well-structured within screen
- bigger problems
o navigating between applications and websites
§ style issues: platform standards, consistency
§ Functional issues: cut and paste (thankfully now mostly central)
Week 11
Abstraction: has been created to simplify problems such as new input devices, new
output, hardware changes, OS updates/ evolution through:
Windowing system
- provides the familiar window metaphor, decorations, etc
- The OS handles input reads in streams from devices and lets the Window
manager:
o Decides which application cares about this info
o Let's the application decide how to act- send it a message somehow
- handles output- applications using windowing API to "paint", or draw, within
its window. Application- centric.
o windowing system translates from the application viewpoint to system
viewpoint, records changes in local buffer
o windowing system uses graphics library to update whole screen as
needed.
- typically, has standardized widgets, controls, and dialogs
- You use the API and you get Device independence eg. touch vs pen vs mouse
- resource sharing: multiple applications can use the same screen, through
"windows". Can use single keyboard, mouse, etc.
- application management: swapping control between applications, enabling
cross application functions like cut/paste.
- as a bonus: consistent look and feel, standardized widgets, hotkeys, theme,
etc.
- On Output, the windowing system translated from the application viewpoint
to system viewpoint, records changes in the local buffer
- How to get it? - Windowing systems come bundled with OS, for linux it's
software to be installed. Higher levels use libraries, e.g., for consistency
across Os (Java, QT, and increasing, HTML5)
Paint model
- It is the Model provided by windowing systems to your screen to let you draw
on the screen.
- You can access the Video card if you want to speed it up but if it crashes then
it crashes the whole system.
Event models
- Without it, everything will be in a monolithic loop. So with events, the program ends up
connected with the windowing manager where the event models uses it to call a function when
a certain action is done ex: keyboard is pressed, mouse is pressed, a specific on-screen button is
pressed, or a timer goes off. Then the windowing manager runs that function.
- When any of the above actions happen, the Windowing Manager calls the
functions provided to do the work. Window managers have wrappers around
delegates/ listeners to provide interface functionality. Called events.
- The central event loop that runs your program is hidden inside your
Windowing Manager, gets started when you make GUI application.
- Events are placed in queues. No events are lost, they will be processed in
order even if the program gets stuck.
- The benefits of event system is that the setup events can be distributed and
be isolated coded, and Standardized events- develop an API and re-use it,
and you worry less about core loop and other simultaneous tasks, and if you
want to add new event listening you can do these changes in real time with
code without thinking of other parts of the program.
Types of events:
- Device events
o e.g. mouse button 1 down, wheel turned
- GUI events
o e.g. enter/leave screen or widget, scroll, repaint
- Window events
o resize window, close window
- Programmer-defined events
o e.g message arrived; calculation finished
—events available are heavily dependent on the OS, programming language,
libraries, etc.
Event information- WS provides detailed info along with event:
- event type
- event time
- state of modifier keys (e.g, alt, shift, ctrl)
- key pressed/released
- Windows components/ affected
Event dispatch- which program or widget gets the event?
- Positional dispatch — the item pointed to by the positioning device (mouse, touch, etc) gets the
event. Typically for mouse events, pointing, wheel, etc. It can scroll unactive window.
- Focused dispatch — the item with "focus" gets the event. A way of indicating current active
widget, usually shown visually, can be modified programmatically (set focus where you want it).
Typically for keyboard.
Model View Controller (MVC): is a standardized architecture for software applications.
- When you’re coding a spreadsheet application, the naïve or intertwined code
approach is code is written for a specific graphical representation, input
device, and data storage where it will have to changed/updated upon a
change in one component but with MVC approach when you change one
thing other things don’t change. So making a change to how a data is viewed
can be done without touching any of the data model or storage. If you want
to make it available to other sources you can easily do that through web
services, or programming API. If you want to implement a new controller like
add touch screen, you can do that without changing the data or view
rendering code.
- You can have multiple views in MVC which promotes flexibility, code reuse,
scalability, and helps with testing