Interakcija čovek računar
Interakcija čovek računar
Predmetni nastavnik: Milan Čabarkapa
(konsultacije: ponedeljak 16-17h, Danijelova ,I sprat)
Predmetni asistent: Ilija Jovanov
(konsultacije: sreda 15-16h)
Stranica predmeta: http://predmet.singidunum.ac.rs/course/view.php?id=351
Literatura:[1] Kursevi sa prestižnih svetskih univerziteta MIT i UCSD
[2] Eric Butow, “User Interface Design for Mere Mortals”, Addison-Wesley, 2007
[3] B. Shneiderman, C. Plaisant “Designing the User Interface”, Addison-Wesley, 2010
[4]User Interface Design Petterns: http://designinginterfaces.com/patterns/
[5] Kurs “Programiranje korisničkog interfejsa” sa Elektrotehničkog fakulteta, Univerziteta u Beogradu
[6] D. Cvetković, “Interakcija čovek-računar”, Skripta, Univerzitet Singidunum (u pripremi)
Interakcija čovek računar
• Motivation
• Design Patterns in UI Design
• Design Patterns in Game Design
• Design Patterns in Software Design
Topics
Interakcija čovek računar
Design = Solutions
• Design is about finding solutions
• Unfortunately, designers often reinvent Hard to know how things were done before Why things were done a certain way How to reuse solutions
Interakcija čovek računar
• An effective and flexible design is difficult to get “right” the first time.
• Yet experienced designers do make good designsNew designers are usually overwhelmed by the all the design options available.
• Experienced designers evidently know something inexperienced ones don’t, what is it?
How Can We Codify Design Knowledge?
Interakcija čovek računar
How Experienced Designers Solve a Problem
• Expert designers usually do not solve every problem from first principles, they reuse solutions that have worked for them in the past.
• When they find a good solution, they use it again and again.
• Such experience is part of what makes them experts.
• Such kind of experiences can be recorded as design patterns
Interakcija čovek računar
Experts’ principals
• “Good artists borrow (from other artists), but great artists steal !” -Pablo Picasso
• Novelists and playwrights rarely design their plots from scratch.
• They follow patterns like “Tragically Flawed Hero” (Macbeth, Hamlet, etc) or “The Romantic Novel” (countless romance novels)
Interakcija čovek računar
Game Players use Patterns
Chess players and Basketball players all relay on “patterns”
1-4 offense Pick-n-roll
Interakcija čovek računar
The Design Methods Hierarchy
Design Idioms, Specific Knowledge and Tips
Design Patterns
Design Principles
Design Philosophy
Abstract
Interakcija čovek računar
Patterns vs. Lexicon/Vocabulary
If some techniques appears so often in a domain, and everyone knows and use it in almost any situation, then most likely they are not patterns
E.g. in game designPlayer
Stage
Enemy
Gun shots
Interakcija čovek računar
The Nature of Design Patterns
Not too general and not too specific Use a solution “a million times over, without ever
doing it the same way twice”
Design patterns are a shared language for “building and planning towns, neighborhoods,
houses, gardens, & rooms.” Ex. Beer hall is part of a center for public life… Ex. Beer hall needs spaces for groups to be
alone… ALCOVES
Interakcija čovek računar
Pattern Format
1. Pattern Name
2. Context
3. Forces
4. Problem Statement
5. Solution
6. Other Patterns to Consider
Interakcija čovek računar
Example - Alcoves
1. Pattern Title: Alcoves
2. Context:
Collaborative and common areas in buildings.
3. Forces
Open spaces are inviting, but people want a sense of enclosure for private discussions.
4. Problem Statement
Create an space that invites collaboration but also supports private discussion.
Interakcija čovek računar
Example - Alcoves
Solution
Interakcija čovek računar
Many Patterns form a Pattern Language
The patterns within a particular domain should be organized into a logical or naturally intuitive structure. Each pattern should indicate its relationship to other patterns and to the pattern language as a whole.
Noticing and naming the common problems in a field of interest
Describing the key characteristics of effective solutions for meeting some stated goal
Helping the designer move from problem to problem in a logical way
Allowing for many different paths through the design process
Interakcija čovek računar
From Architecture to Computer Science
In early 90s, Erich Gamma, et. al borrowed the idea from architecture and used it in software engineering
Communicate OO software design problems & solutions
Interakcija čovek računar
Patterns in HCI/UI Design
Interakcija čovek računar
UI Patterns Categorized by Tedwell 2005
• Information architecture and application structure
• Navigation, signposts and way finding
• Layout of page elements
• Actions and commands
• Visualization patterns
• Forms and controls
• Builders and editors
• Visual style and aesthetics
Interakcija čovek računar
Extras on Demand
Description: Show the most important content up front, but hide the rest. Let the user reach it via a single, simple gesture
Interakcija čovek računar
Extras on Demand
• Context
There's too much stuff to be shown on the page, but some of it isn't very important. You'd rather have a simpler UI, but you have to put all this content somewhere
• SolutionRuthlessly prune the UI down to its most commonly used, most important items. Put the remainder into their own page or section. Hide that section by default; on the newly simplified UI, put a clearly marked button or link to the remainder, such as "More Options." Many UIs use arrows or chevrons, ">>", as part of the link or button label. Others use "…", especially if the button launches a new window or page.
Interakcija čovek računar
Extras on Demand
Examples
Interakcija čovek računar
Breadcrumbs
From http://java.sun.com
Description: On each page in a hierarchy, show a map of all the parent pages, up to the main page
Interakcija čovek računar
Breadcrumbs
Context
The application or site has a straightforward tree structure, without much interlinking among the tree elements. Users work their way up and down this tree, either via direct navigation or searching.
SolutionNear the top of the page, put a line of text or icons indicating the current level of hierarchy. Start with the top level; to its right, put the next level; and so on down to the current page. Between the levels, put a graphic or text character—usually a right-pointing arrow—to indicate movement from one level to the next.
Interakcija čovek računar
Breadcrumbs
Examples
Interakcija čovek računar
Responsive Enabling
Problem: ? (it’s your turn now)
Interakcija čovek računar
Responsive Enabling
ContextThe UI walks the through complex step-by-step, perhaps because it is computer-naive, or because the task is rarely done (as in a Wizard). But you don't want to force the user to go page by page at each step—you'd like to keep the whole interface page. Furthermore, you want to keep the interface stable
Solution
In some applications, most actions on the UI start off disabled—only the actions relevant to the user's first step are available. As the user makes choices and performs actions, more disabled items should be enabled and brought into play
Interakcija čovek računar
Responsive Enabling
Examples
Interakcija čovek računar
Structured Format
Description: Your interface requests a specific kind of text input from the user, formatted in a certain way.
Interakcija čovek računar
Structured Format
ContextThe input format expected by your program is familiar and well-defined, and your program don't expect any users to need to deviate from the format you expect. Examples include credit card information, local telephone numbers, and license strings or numbers
SolutionDesign a set of text fields that reflect the format being asked for. Keep the text fields short, as clues to the length of the input. Once the user has typed all the digits or characters in the first text field, confirm it by automatically moving the input focus to the next field. You can still go back and re-edit the first one, of course, but you know now how many digits are required there.
Interakcija čovek računar
Structured Format
Examples
Telephone Number:
Credit Card Number:
Date:
ISBN Number
Interakcija čovek računar
Two-panel selector• Put two side-by-side panels on the interface. In the first, show a set of items that the user can select; in the other, show the content of the selected item.
• You're presenting a list of objects, categories, or even actions. Messages in a mailbox, sections of a web site, songs or images in a library, database records, filesall are good candidates. Each item has interesting content associated with it, such as the text of an email message or details about a file's size or date. You want the user to see the overall structure of the list, but you also want the user to walk through the items at his own pace, in an order of his choosing.
• Physically, the display you work with is large enough to show two separate panels at once.
• The Two-Panel Selector is a learned convention, but an extremely common and powerful one. People quickly learn that they're supposed to select an item in one panel to see its contents in the other. They might learn it from their email clients, from Windows Explorer, or from web sites; whatever the case, they apply the concept to other applications that look similar.
Interakcija čovek računar
Two-panel selector
Mac Mail
Interakcija čovek računar
Two-panel selector
Windows Explorer
Interakcija čovek računar
Two-panel selector
Blackberry Mobile Time Entry
Interakcija čovek računar
One-window drilldown• Show each of the application's pages within a single window. As a user drills down through a menu of options, or into an object's details, replace the window contents completely with the new page.
• Your application consists of many pages or panels of content for the user to navigate through. They might be arranged linearly, in an arbitrary hyperlinked network, or most commonly in a menu hierarchy. Address books, calendars, and other familiar applications often use this pattern.
• You are building for a device with tight space restrictions, such as a handheld cell phone, or a TV.
• Keep it simple. When everything's on one screen or window, the options at each stage are clear, and users know they don't need to focus their attention anywhere else.
Interakcija čovek računar
One-window drilldown• You are given one window to work with a miniature screen, a full-sized screen, a browser window, or an application window that lives on the desktop alongside other applications. Structure your content into panels that fit gracefully into that window: not too large and not too small.
• On these panels, design obvious "doors" into other UI spaces, such as underlined links, buttons, or clickable table rows. When the user clicks on one of these, replace the current panel with the new one. Thus the user "drills down" deeper into the content of the application.
Interakcija čovek računar
One-window drilldown
Two iPod menus
Interakcija čovek računar
One-window drilldown
Mac OS X
Interakcija čovek računar
One-window drilldown
Email client
Interakcija čovek računar
Alternative views• Let the user choose among alternative views that are structurally different, not just cosmetically different, from the default view.
• You're building a web page, an editor, a map application, or anything that displays formatted content of any kind. People will use it under many conditions.
• Try as you might, you can't always accommodate all possible usage scenarios in a single design. For instance, printing is typically problematic for applications because the information display requirements differ navigation and interactive gizmos should be removed, for instance, and the remaining content reformatted to fit the printer paper.
• Choose a few usage scenarios that the application's (or page's) normal mode of operation cannot easily serve. Design specialized views for them, and present those views as alternatives within the same window or screen.
Interakcija čovek računar
Alternative views
Boston.com in standard format and in printer-friendly format
Interakcija čovek računar
Alternative views
Both the Windows Explorer and the Mac Finder permit several alternative views of the files in a filesystem
Interakcija čovek računar
Alternative views
Google's search results can return not just ordinary HTML Web pages, but PDF, Word, and Powerpoint documents as well. What if you don't have Word or Powerpoint on your client machine? That technology problem dictates the use of an alternative view: the HTML "translation." What if you really don't want to download a large Powerpoint slideshow and just want to skim the HTML translation in a hurry? That's a user preference.
Interakcija čovek računar
Alternative views
Microsoft Word - Normal View
Interakcija čovek računar
Alternative views
Microsoft Word – Outline View
Interakcija čovek računar
Alternative views
Microsoft Word – Print Layout View
Patterns in Game Design
[Bjork 2004] http://www.gamedesignpatterns.org/
MILLEE [Kam et al]Using a pattern based framework to design educational games in developing country
Game Patterns Categorized by Bjork 2004
• Game elements
• Resource management
• Information, communication and presentation
• Actions and event patterns
• Narrative structures, predictability and immersion patterns
• Social interaction
• Goals
• Goal structures
• Game Sessions
• Game mastery and balancing
• Meta games, replayability and learning curves
Producer-Consumer
Description: The production of resource by one game element that is consumed by another game element or game event
Producer-Consumer
ConsequencesConcrete, and very common pattern
Can regulate the flow of the game
Can increase the complexity of the game, especially if the players can control the producer-consumer elements
Can increase the feeling of player control
Producer-Consumer
Using the pattern Production regulation
Based on: time or turn, player actions, game events, element configuration, continuous production vs. one-time etc.
Effects: what is produced, indicators to players, play mode changes etc.
Consumption regulationBased on and effects as in production
Use of Factory, Accumulator and other related patterns
High Score Lists
• Description: give players the chance to rank themselves against other players who have previously played the game
Power-Ups
• Description: Power-Ups are game elements that give time-limited advantages to the player that picks them up
Paper-Rock-Scissors
• Description: Sets of three or more actions form cycles where every action has an advantage over another action
Paper-Rock-Scissors
• Context – Game designers want to avoid a general winning strategy in the game
play, thus encourage players to observe the activities of the in-game opponents thus promote tension and randomness of the game
• Solution– It’s your turn now, show me how can you design such an element in
your class project
Interakcija čovek računar
Discussion
•Is design pattern a silver-bullet in creating effective interfaces?
• Will design patterns destroy creativity?
• A common design vocabulary• A documentation and learning aid• An adjunct to existing methods• A target for refining existing design
Interakcija čovek računar
From Architecture to Computer Science
In early 90s, Erich Gamma, et. al borrowed the idea from architecture and used it in software engineering
Communicate OO software design problems & solutions
Interakcija čovek računar
Životni ciklus softvera
Interakcija čovek računar
Životni ciklus softvera
Interakcija čovek računar
Životni ciklus softvera
Principles of Good Screen Design
Perceptual Processor
• Human Visual Performance Arguments– important items stand out by varying properties of items,
e.g., color, shape
– user search guided by organization of screen elements, e.g., user’s eye navigates from left to right and top to bottom
Perceptual Processor
• Anything that is seen by our eyes has to be processed
• The processing difficulty depends the complexity of the visual scene and on our previous memory of the scene
Visual Processing Speed
• Images that we already are familiar with simply match to images stored in our memory– the processing time is fast
– the processing effort is low
Visual Processing Speed
• For native English readers, the character on top right is processed faster
• For native Chinese readers, the character on the bottom right is processed faster
A
Pay Attention!
I am going to show the next slide as fast as I can
M
Take out a pencil and draw the character you just saw
Pay Attention!
I am going to show the next slide as fast as I can
Take out a pencil and draw the character you just saw
Visual Processing Speed
• English character has same complexity as Chinese character.
• Because the English character simply needs to be mapped to a similar character in our memory, the visual understanding speed is much shorter
• Chinese students will, of course, be faster with the Chinese characters
What do you see?
What information do you memorize?
• Location of element
• Shape of element
• Relationship of element to other elements on screen
• Pictures of icons
• Colors
Human Processing of Complex Visual Scenes
• The time it takes to visually understand a scene depends on the number of unique elements that we must visually identify in the scene– If we have already learned the scene, we record it as one
element• Words are recorded as a single element.
– One graphical component many have several unique components.
An Example of a Complex Visual Scene
Control Panel for Desktop Video Conferencing
• Too many elements to learn
• Elements located all over screen – each individual location and relationship to other elements has to be
learned
• Elements not clustered or ordered so that sub-groupings can be learned
Another Example of a Complex Scene
Drexel Home Page
• Hard to process because the organization creates many different visual paths through the page
• Hard to search for information
• Animation in corner is distracting to information search - changing scene requires constant visual update
Another Example of a Complex Scene
Galitz: Graphical Design Principles
• Principles come from the way the human visual system works
• Principles relate to;– HOW HARD IT IS TO PROCESS VISUAL SCENE
– HOW MUCH OF SCENE CAN BE MATCHED TO MEMORY
Organization of Screen Elements
• Balance
• Symmetry
• Regularity
• Predictability
• Sequentiality
• Economy
• Unity
• Proportion
• Simplicity
• Groupings
Balance
• Equal weight of screen elements– Left to right, top to bottom
Balance
Unstable
Balance
• Left column processed - Right column noted as same
• Both columns need to be understood by visual processing system
Symmetry
• Replicate elements left and right of the center line
Symmetric
Asymmetric
Symmetry
• Left column processed - Right column noted as same
• Both right & left columns processed plus relationship of right to left
Regularity
• Create standard and consistent spacing on horizontal and vertical alignment points
Regular
Irregular
Regularity
• Left column processed - 2 right columns noted as same
• Location & size of each object processed
Predictability
• Put things in predictable locations on the screen
Predictable
Spontaneous
Predictability
• User expects title & menu bar on top of screen
• Visual scene needs to be completely processed - objects not in expected places
Sequentiality
• Guide the eye through the task in an obvious way– The Eye is attracted to:
• bright elements over less bright
• Isolated elements over grouped
• graphics before text
• color before monochrome
• saturated vs. less saturated colors
• dark areas before light
• big vs. small elements
• unusual shapes over usual ones
Sequential
Random
Economy
• Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible
Economical
Busy
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK Cancel
Unity
• Make items appear as a unified whole (for visual coherence)– Use similar shapes, sizes, or colors
– Leave less space between screen elements than at the margin of the screen
Unity
Fragmentation
Proportion
• Create groupings of data or text by using aesthetically pleasing proportions
Square - 1:1 Square Root of 2 - 1:1.414Golden Triangle - 1:1.618
Square Root of 3 - 1:1.732 Double Square - 1:2
Pleasing Proportions
Simplicity
• Minimize the number of aligned points– Use only a few columns to display screen elements
• Combine elements to minimize the number of screen objects– Within limits of clarity
Simple
Complex
Dues:
Membership FormName:
Address:City:
State:Zip:
Pubs:Total:
OKCancel
Simplicity
• Only four alignments need to be processed
• A total of nine alignments need to be processed
Name:Address:
City:
State:Zip:
Dues:Pubs:
Total:
OK Cancel
Membership Form
Membership FormName:
Address:
City:State:
Zip:
Pubs:Total:
OKCancel
Simple
Complex
Groupings
• Use visual arrangements to provide functional groupings of screen elements– Align elements in a group
– Evenly space elements in a group
– Provide separation between groups
• Use additional group elements sparingly– color & borders add complexity
Simple Grouping
• Similar elements aligned vertically
• Vertical distance between similar objects small
• Boxes add additional complexity to form
• Spatial arrangement adequate
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK Cancel
Boxed Grouping
Background Grouping
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK Cancel
• Color adds additional visual complexity
• Spatial arrangement adequate
Interakcija čovek računar
Važno !
Ova prezentacija je nekomercijalna. Slajdovi mogu da sadrže materijale preuzete sa Interneta, stručne i naučne građe, koji su zaštićeni Zakonom o autorskim i srodnim pravima. Ova prezentacija se može koristiti samo privremeno tokom usmenog izlaganja nastavnika u cilju informisanja i upućivanja studenata na dalji stručni, istraživački i naučni rad i u druge svrhe se ne sme koristiti – Član 44 - Dozvoljeno je bez dozvole autora i bez plaćanja autorske naknade za nekomercijalne svrhe nastave: (1) javno izvođenje ili predstavljanje objavljenih dela u obliku neposrednog poučavanja na nastavi; - ZAKON O AUTORSKOM I SRODNIM PRAVIMA ("Sl. glasnik RS", br. 104/2009 i 99/2011).................................................................................................................................................................................Milan Č[email protected]