Usability & Visual Design

Slides:



Advertisements
Similar presentations
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
Advertisements

Design Principles By Wesley Rolston. Five Design Principles Proximity alignment Repetition Balance Contrast.
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Basic Principles of Design How to make your websites and video graphics look more professional.
Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Visual Organization and Website Design Unit 5 (no CSS) September 19.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Basic Web Design Considerations CS /6/07. Basic terms Web page Web page Web site Web site Home page Home page Sub pages Sub pages.
14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Usability & Visual Design Krystine Wetherill.  Usability measures the quality of a user's experience when interacting with a product or system—whether.
Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.
1 Technical Communication A Reader-Centred Approach First Canadian Edition Paul V. Anderson Kerry Surman
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Developing A Website. Reminder 1 You want your website to be _______? 1)Artistic 2)Easy to use 3)Interactive 4)Multimedia-driven.
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Web-designWeb-design. Web design What is it? Web-design features Before…
Design Principles Review
IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. This work is licensed under the Creative.
Usability Testing & Web Design by Alex Andujar. What is Usability? Usability measures the quality of a user's experience when interacting with a Web site,
Website Usability presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design evaluating and planning for web design.
Design Principles The good and the bad Alyssa Mendiola Summer 2009.
Design Principles for the Web Lavanya Koppaka. Why follow design principles? Structure the information being presented Increase the readability Ease of.
Introduction to Web Page Design. General Design Tips.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
Principles of effective web design NOTES Flo Morris-Duffin.
Building Your Web Page. Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22.
Design Principles EDUC 6307: Design of Print Based Media Summer 2009 Ranelle Woolrich.
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
XP New Perspectives on HTML and XHTML, Comprehensive 1 Developing a Basic Web Page Week 2.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
Introduction to Interactive Media 09: Good Design is CRAP.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
TECM 3200 Dr. Lam. Project 1: Designing/developing a professional website  Web design process  Content on the web  Laying out your website.
The Successful Website
Design basics for web, print, powerpoint, doodling on napkins, and more by Lisa Blankenship, rev
Surface Stage: Design Comps
CARP Four Principles of Design
Section 7.1 Section 7.2 Identify presentation design principles
Creating an Accessible Document
Web-design.
Principles of Graphic Design
Define phase Interview the client to understand goals, audience, content, design, and delivery requirements. Organize and outline interview information.
Document Design is CRAP
Layout - you need to understand that a simple navigation bar:
Web Design Techniques.
GRAPHIC DESIGN TIPS & TRICKS
Fixed Positioning.
C.R.A.P. Design Principles
Applications Software
Design Principles 8-Dec-18.
Web Design Tips.
Document Design Justine Nielsen April 28, 2003
C.R.A.P. Design Principles
Introducing: CRAP TECH MENTORING
DELIGHT WITH UX DESIGN RACHEL KORPELLA
Design Principles 5-Apr-19.
Interface Design Interface Design
Elements of Effective Web Design
Site Design & Organization
The four basic principles of design
The four basic principles of design
Elements and Principles For Design!
Presentation transcript:

Usability & Visual Design Krystine Adams

What is Usability? Usability measures the quality of a user's experience when interacting with a product or system—whether a Web site, a software application, mobile technology, online class or any user-operated device. How do you measure that? Simple: How fast can users learn and use a product to achieve their goals?

How do you measure Usability? Usability is not a single property. It is made up of several factors, including, but not limited to: Ease of learning – How long? Efficiency of use – How easy? Memorability – Can I do it again? Error frequency and severity – I’m lost! Subjective satisfaction – Did I do it? Did I like it?

Examples of how we do this NAVIGATION Always in the same place Generally on the left side or on top Not too many options If you’re designing for mobile, is the button big enough for a finger! COLORS & TYPE Not too many colors! Considering color blindness for color cues – Color Vision Test (Firefox) Contrasting in color text against the background Never underlining something that is not a link Using HEADERS and hierarchy for formatting

Example UNCW Website: http://www.uncw.edu Task: Find the Academic Calendar Task: How do you get to the Watson College of Education website? Task: How do you get to the Bookstore? UNCW Viewbook (http://www.uncw.edu/feeltheteal/) Can you find what you are looking for? Does it look good and fit in your browser? Do you like the colors? Are they too light/dark? Do the links work properly? What would you change?

REPEAT! Usability Roadmap INSPIRATION - initial ideas, insights and new ideas VALIDATION - testing, feedback and development EVALUATION - effectiveness and impact REPEAT!

What makes up Usability? Why have good usability? user satisfaction reduces training time and cost better understanding Elements of good usability: User-Centered Design Visual Design

What is User-Centered Design? User Centered-Design (UCD) is a philosophy and a process. It is a philosophy that places the person (as opposed to the 'thing') at the center; it is a process that focuses on cognitive factors (such as perception, memory, learning, problem- solving, etc.) as they come into play during peoples' interactions with things.

What does that mean? UCD seeks to answer questions about users and their tasks and goals, then use the findings to drive development and design. UCD seeks to answer questions like: Who are the users? What are their goals or tasks? What is the user experience level? What functions do they need? What information do they need? How do they think it will work? How does the design help them learn?

Information Architecture Plan out every detail of your site! Create intuitive navigation for your product. Organize your information in easy to understand lists BE CONSISTENT!! Don’t change your navigation throughout the product 3 Click Minimum – No user wants to go down the rabbit hole of links! Think about global navigation, local or sub-navigation, and utility links www.uncw.edu/ed

UCD Pitfalls YOU’RE THE EXPERT! Don’t assume the user understands the process or has the same goals as you. TECH SAVVY? Don’t assume the user has the same technical skills as you. INSIDER TERMS! Don’t use terminology without explanation Example: YOUR MOM USING SNAPCHAT!!

Visual Design Is The Tool To Relay The Message What is Visual Design? Visual design is the visual representation and support of the information architecture, interaction and goals of your product, whether an application or website. Visual Design Is The Tool To Relay The Message (See how I just used it with this awesome big, bold text)

Visual Design Basics SKEUOMORPHISM!!! Your everyday experiences are based-on, revolves around, includes and shapes visual design. Computer icons – design communicates the function trash can folders save icon SKEUOMORPHISM!!!

Don’t think design matters? Jakob Nielsen – Usability Expert His website in 2012 – Original UseIt.com Apple.com Think about the impact that Apple products have made - not because they necessarily work better than other machines, phones or music players; but because they have a style and a stylish iLife that accompanies them. iPod, iTunes, iMac

5 Common Mistakes Example: Smith & Goldsmith Not considering the impact of the design Lack of unity Graphics don’t match Confusing Use of Contrast size colors and values (Mea Cuppa, an example of good) type (bold, italic, size, alignment) elements & graphics Misuse of Fonts comic sans must die readability too many fonts!

Yes we C.A.R.P. CONTRAST ALIGNMENT REPETITION PROXIMITY If two items are not exactly alike, make them different, really different When things are bigger, they seem more important When colors are brighter or bolder, they stand out more ALIGNMENT Nothing should just be placed on the page! Make everything count! Centered alignment is boring!! REPETITION Unifying elements by using same font, colors, shapes (show target) Repeating elements can take on a pattern PROXIMITY Things that are close to each other, immediately feel connected!

Contrast If two items are not exactly alike, make them different, really different When things are bigger, they seem more important When colors are brighter or bolder, they stand out more BIG small

Alignment Nothing should just be placed on the page! Make everything count! Centered alignment is boring!! Misalignment is irritating!

repetition Unify elements by using same font, colors, shapes Repeating elements to create patterns Repeating colors to create themes Making headers consistent

Proximity Things that are close to each other, immediately feel connected! Get down with the Gestalt Theory!!

3 Design Principals Use layouts to convey meaning and relationships: example Use patterns and repetition to organize your content: example Use only the images you need: example

Good vs. Bad Good and Bad Web Design Elements Web Pages That Stink http://www.georgehutchins.com/ http://www.arngren.net/ http://www.gatesnfences.com/ http://smithandgoldsmith.homestead.com/home.html http://www.dpgraph.com/ Web Pages That Don’t http://design-newz.com/ http://ismaelburciaga.com/ http://meacuppa.com/ https://www.thebestdesigns.com/

Information Sources Usability.gov Usabilityfirst.com Adobe Color CC – color schemes for you! The Non-Designer’s Design & Type Books Conquering the Content