Scribd
Upload
25 views11 pages

finalSWE321 - W

The document discusses various UI patterns for mobile and web applications. It covers 10 common patterns for mobile global navigation including navigation bars and hamburger menus. It also discusses 4 important Gestalt principles of proximity, similarity, continuity, and closure. There are examples of bad and good design provided. The document concludes with 20 multiple choice questions testing knowledge of topics covered.

Uploaded by

reema daily
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views11 pages

finalSWE321 - W

The document discusses various UI patterns for mobile and web applications. It covers 10 common patterns for mobile global navigation including navigation bars and hamburger menus. It also discusses 4 important Gestalt principles of proximity, similarity, continuity, and closure. There are examples of bad and good design provided. The document concludes with 20 multiple choice questions testing knowledge of topics covered.

Uploaded by

reema daily
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Chapter 5

The Patterns:
● Feature, Search, and Browse
● Mobile Direct Access
● Streams and Feeds
● Thumbnail Grid
● Dashboard
● Canvas Plus Palette
● Wizard
● Settings Editor
● Alternative Views
● Many Workspaces
● Help Systems
● Tags

Chapter 6

The challenge

Understanding the Information and Task Space


Signposts: Signposts are features that help users figure out their
immediate surroundings.

Global Navigation - Mobile

●In the mobile environment, we see two main


approaches to global navigation.
○The first is a navigation bar that sits at the bottom of the screen.
■It remains in that location as the user goes from screen to screen.
■It might have an internal left-right scroll, as well, if there are additional
navigation items.
○The second approach is the “hamburger” menu; this is a stack of three
horizontal lines.
■A hamburger menu is an icon used on a website that, when clicked,
opens to reveal a navigation menu
■Sometimes, this is a slenderer stack of three dots.
■Tapping this invokes a panel with the global navigation choices.

The patterns
●Clear Entry Points
●Menu Page
●Pyramid
●Modal Panel
●Deep Links
●Escape Hatch
●Fat Menus
●Sitemap Footer
●Wizards.
●Sign-In Tools
●Signposts Patterns:
○Progress Indicator
○Breadcrumbs
○Annotated Scroll Bar
FOUR IMPORTANT GESTALT PRINCIPLES:
//listing (4)
○Proximity
■Put things close together, and viewers will associate them with one
another. This is the basis for strong grouping of content and controls on
a UI.
○Similarity
■If two things are the same shape, size, color, or orientation, for
instance, viewers will also associate them with each other.
○Continuity
■Our eyes want to see continuous lines and curves formed by the
alignment of smaller elements.
○Closure
We also want to see simple closed forms, such as rectangles and blobs
of whitespace, that aren’t explicitly drawn for us. Groups of things often
appear to be closed forms.
Example of Bad design:

- Crowded
- Colour combination is not good
- Too many screens with a light background

Good Design
MCQ
○Sans serifs works better at very small point sizes on computer
displays but not on print.
■Pixels aren’t big enough to render tiny serifs well.

Chapter 9

●Design fidelity.
○Low-fidelity Sketch-style prototypes (E.g paper)
○Wireframe-style prototypes (E.g photoshop)
○Full-fidelity design mockups (E.g HTML)

Paper Prototype Pros


●Test Ideas Quickly
●Cheap and Involves No Tools or Training
●Particularly Suited to Collaborating
●Creating a Shared Understanding
●No Training Necessary
●No Technical Constraints
●With paper, you are only restrained by your imagination and the physical
items you can use.

Paper Prototype Cons


●It’s Unresponsive
●Lots of Stationery Required
●Needs Supervising
●Takes Practice and Experience to Run Research Sessions
●Not Easy to Share
●Difficult to Edit
Jacob nilsson 5 ‫الزم نعدد من الصورة‬
Visibility of system status

Match between system and the real world


User control and freedom

Consistency and standards


Error prevention

Recognition rather than recall


Flexibility and efficiency of use

Aesthetic and minimalist design


Help users recognize, diagnose, and recover from errors

Help and documentation


20 mcq
Written questions:
Paper pros and cons
Jacob nilsson (5) comes in picture
Picture bad design and good design
Global navigation

What are the characteristics of visual hierarchy design?


○Clarity
■How well the design communicates the information the designer is
trying to convey.
○Actionability
■How the user knows what they are supposed to do on any given
screen.
○Affordance
■Affordance means that it looks or behaves like what it does. For
example, a button that looks slightly three-dimensional gives a visual cue
that it is clickable.
○Composition
■Composition refers to the arrangement and proportion of a visual
design.
○Consistency
■Visual elements appear in a predictable and uniform visual language. If
you employ icons in your interface design that they are always used
within your experience to convey the same functionality. The same goes
for the use of language in your interface.
○Alignment
■Nothing is more jarring to a user than moving from screen to screen
and having the elements of the screen change for no apparent reason.
Make sure the screen elements do not move their place from screen to
screen. Text that changes from left, right, or center aligned randomly is
also disharmonious to the understandability and legibility of digital
product design.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy