CS 235: User Interface Design September 10 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak

CS 235: User Interface DesignSeptember 10 Class Meeting

Department of Computer ScienceSan Jose State University

Fall 2014Instructor: Ron Mak

www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

Computer Science Dept.Fall 2014: September 10

CS 235: User Interface Design© R. Mak

2

Organization Design Patterns

Feature, Search, and Browse News Stream Picture Manager Dashboard Canvas + Palette

Wizard Settings Editor Alternate Views Multiple Workspaces Multilevel Help



3

Navigation Design Patterns

Clear entry pointsHub and spoke Fully connected

Multilevel

Sequential

Pyramid

Designing Interfaces, 2nd ed.by Jenifer TidwellO’Reilly Media, 2011



4

Navigational Design Patterns, cont’d

Pan and zoom Modal dialog

Escape hatch Bookmark




5

Page Layout

Manipulate page attention to convey

meaning sequence points of interaction

Visual hierarchy:

What’s important? What’s related?

_



6

How to Show ImportanceText sizes to show hierarchy Text density Background color

Visual rhythm Position and size

Emphasize small items




7

How to Show Relationships

Peer items One distinguished item

Grouped related items List of items Captions and comments

Containment




8

Four Gestalt Principles

Proximity

Viewers will associate together items that are placed close together.

Similarity

Viewers will associate two things that have |the same shape, size, orientation, etc._

gestalt: An organized whole that is perceived as more than the sum of its parts.



9

Four Gestalt Principles, cont’d

Continuity

Viewers’ eyes want to see continuous lines and curves formed by the alignment of items.

Closure

Viewers’ eyes want to see implicit simple closed forms such as rectangles._



10

Four Gestalt Principles, cont’d




11

Page Layout Design Patterns

Page layout design patterns provide specific ways to incorporate the layout concepts and principles.

Solve layout problems._



12

Layout: Visual Framework

What A common framework for all

application pages but which allows flexibility to handle varying page content

When Designing an application

with multiple pages You want the pages to

appear to belong together

Why Provide consistency Help page content stand out



13

Layout: Center Stage

What The most important part

of the UI has the largest subsection of the page

Secondary windows cluster around in smaller subpanels

When The page’s primary job

is to show a single unit of information or to permit a single task

Why Guide the user to the

most important part



14

Layout: Grid of Equals

What Arrange equally important

items in a grid, each with equal visual weight

When Many items have similar

style and importance Allow the user to preview

Why Give each item equal

importance Tell the user the items are

similar Neat and orderly



15

Layout: Tiled Sections

What Visually separate

sections of content Each section has

a strong title

When Make the page

easy to scan with grouped content

Why Content is structured into

easily digestible chunks Obvious information

architecture



16

Layout: Module Tabs

What Put content modules

into separate tabs Only one tab is visible

at a time

When Multiple content types Users only need to

see one type at a time

Why Tabs have a familiar

physical model Less cluttered user

interface



17

Layout: Collapsible Panel

What The user can open and

close secondary content panels

When Not enough room to

show all content panels Different users have

different needs

Why Allow the user to

choose what to see



18

Layout: Movable Panels

What The user can rearrange

content panels

When Different arrangements

for different purposes Different users have

different needs

Why Allow the user to

arrange the panels to suit his needs and preferences



19

Layout: Left-Right Alignment

What A two-column

arrangement Right-aligned labels

on the left Left-aligned items on

the right

When An input form or any

other set of labeled items

Why Neat with strong

perceptual grouping



20

Layout: Responsive Enabling

What Progressively enable

UI components as the user selects options

When Lead a user through a

complex task step by step.

The user can easily change his mind

Why The user can see all

the options Only the required

options are enabled



21

Layout: Self-Adjusting Layout

What The page contents

automatically resize to maintain the same arrangement for a different window size and aspect ratio

When Users can resize

windows as desired

Why Users choose window

sizes and aspect ratios unpredictably



22

Prototyping Tools (Thanks to Jarad Bell)

Apple Keynote/Microsoft Powerpoint Basic interactivity between individual elements and/or pages.

Balsamiq Rapid development of wireframes Visual design limitations though

Sketch Easily design digital concepts and interface styles. But you can not create a clickable or interactive prototype.

OmniGraffle I have little to no experience with this tool.



23

Prototyping Tools, cont’d

Apple Adobe Muse Allows visual designers to take their adobe elements and

create live websites with ease. HTML export can be a little primitive though.

JustinMind Personally, I think this is the best tool besides Keynote.

Axure The most complex and powerful tool right now. The HTML export doesn't work the best

for transferring over into development. Steep learning curve.



24

Prototyping Tools, cont’d

MarvelApp Really easy to use. You create hotspots around elements to create interactions

with various elements/pages. It allows you to use PSDs from Photoshop.



25

Desktop Prototyping with Java Swing

Most easily done using the NetBeans IDE.

Includes a graphical drag-and-drop editor. Automatic Java code generation.

Tutorials:

Introduction to GUI Buildinghttp://netbeans.org/kb/docs/java/gui-functionality.html

Designing a Swing GUI in NetBeans IDEhttp://netbeans.org/kb/docs/java/quickstart-gui.html

Demo

http://netbeans.org/kb/docs/java/gui-functionality.html

http://netbeans.org/kb/docs/java/quickstart-gui.html



26

Java Layout Managers

A Swing container is a component that can contain other components.

Examples: A JFrame object and a JPanel object are containers.

A Swing container delegates laying out its components to a layout manager.

Swing has several predefined layout managers. Example: The FlowLayout manager.

_



27

Java Layout Managers, cont’d

A layout manager also controls how the individual components reshape themselves when you reshape the container at run time.

Example: You reshape a JFrame window with the mouse and the window contents reshape themselves.

Which layout design pattern? self-adjusting layout

_



28

Java Layout Managers, cont’d

Object-Oriented Design & Patterns, 2nd ed.by Cay HorstmannJohn Wiley & Sons, 2006.

Demo



29

Assignment #2

Create a prototype of your application. Use organization, navigation, and page layout

design patterns. Your choice of prototyping tool.

Demonstrate at least 2 of your use cases.

Do a live presentation in front of your client team and the rest of the class. Show how you met (most) of the requirements. Defend your design decisions.



30

Assignment #2, cont’d

Presentations September 22, 24, and 29 Exact date for each team determined randomly.

Each presentation will be 30 minutes. Explain the application. What were the requirements?

Highlight the ones that your prototype meets. Which use cases will your prototype show?

Live demo. Q&A with the client team. Q&A with the rest of the class.



31

Assignment #2, cont’d

Scoring:

Up to 50 points on the prototype. Demonstrate use cases well? Meet requirements?

Up to 50 points on the presentation. Design team members well prepared? All design team members participate in the presentation? Explain application well? Defend design decisions well? Answer questions well?

_

Documents

CS 235: User Interface Design September 10 Class Meeting Department of Computer Science San Jose State University Fall 2014 Instructor: Ron Mak mak