Interakcija čovek računar Stranica predmeta: Literatura: [1] D. Cvetković, “Interakcija...

Interakcija čovek računar


Stranica predmeta: http://predmet.singidunum.ac.rs/course/view.php?id=351

Literatura:[1] D. Cvetković, “Interakcija čovek-računar”, Skripta, Univerzitet Singidunum (u pripremi)[2] Kurs “Programiranje korisničkog interfejsa” sa Elektrotehničkog fakulteta, Univerziteta u Beogradu[3] Kursevi sa prestižnih svetskih univerziteta MIT i UCSD[4] Eric Butow, “User Interface Design for Mere Mortals”, Addison-Wesley, 2007[5] B. Shneiderman, C. Plaisant “Designing the User Interface”, Addison-Wesley, 2010[6] User Interface Design Petterns: http://designinginterfaces.com/patterns/

Nastavnik Doc. Dr Milan Č[email protected]

Sreda16-17h

Asistent Branko Pavlović[email protected]

Nakon časova vežbi

Asistent Đorđe Mijatović[email protected]

mailto:[email protected]





• Motivation

• Design Patterns in UI Design

• Design Patterns in Game Design

• Design Patterns in Software Design

Topics


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


• 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?


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


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)


Game Players use Patterns

Chess players and Basketball players all relay on “patterns”

1-4 offense Pick-n-roll


The Design Methods Hierarchy

Design Idioms, Specific Knowledge and Tips

Design Patterns

Design Principles

Design Philosophy

Abstract


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


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


Pattern Format

1. Pattern Name

2. Context

3. Forces

4. Problem Statement

5. Solution

6. Other Patterns to Consider


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.


Example - Alcoves

Solution


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


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


Patterns in HCI/UI Design


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


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


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.


Extras on Demand

Examples


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


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.


Breadcrumbs

Examples


Responsive Enabling

Problem: ? (it’s your turn now)


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


Responsive Enabling

Examples


Structured Format

Description: Your interface requests a specific kind of text input from the user, formatted in a certain way.


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.


Structured Format

Examples

Telephone Number:

Credit Card Number:

Date:

ISBN Number


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, files all 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.


Two-panel selector

Mac Mail


Two-panel selector

Windows Explorer


Two-panel selector

Blackberry Mobile Time Entry


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.


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.


One-window drilldown

Two iPod menus



Mac OS X



Email client


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.


Alternative views

Boston.com in standard format and in printer-friendly format


Alternative views

Both the Windows Explorer and the Mac Finder permit several alternative views of the files in a filesystem


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.


Alternative views

Microsoft Word - Normal View


Alternative views

Microsoft Word – Outline View


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


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


Ž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


• 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

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


• 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.414 Golden 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


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]

Interakcija čovek računar Stranica predmeta: Literatura: [1] D. Cvetković, “Interakcija...

Documents

Transcript of Interakcija čovek računar Stranica predmeta: Literatura: [1] D. Cvetković, “Interakcija...