CANVAS Layout and Style for Usability. Aspects of Usability Content Importance, Necessity Aesthetic Interesting, evokes desired emotion Organization Leads.

Slides:



Advertisements
Similar presentations
Website Design What is Involved?. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising.
Advertisements

Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Refinement Production Implementation Design and Development Stages.
How Well is Your Site Organized?. Agenda  Information Architecture / Navigation  What Does the User Want?  How to Organize Information  Best Practices.
INTERACTIVE BRAND COMMUNICATION Class 7 Creative Issues II: Creating Effective Online Advertising.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
User Centered Web Site Engineering Part 2. Developing Site Structure & Content Content View Addressing content Outlining content Creating a content delivery.
Designing for the Web 7 Useful Design Principles.
What Is Usability? Usability is a quality attribute that assesses how easy Web sites are to use. “Usability" also refers to methods for improving ease-of-use.
Web Development Life Cycle from Beginning to End…and BEYOND!
Powerpoint Rules Adding to your Presentation. Purpose of a Powerpoint Tool to help audience remember message Visual learners stay attentive Used as an.
International Culture Project Mr. Cummings-Morrow.
What is Multimedia?. Today’s objectives Define multimedia Work with XHTML Work with CSS.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Web Design with HTML & CSS Lesson 1. Planning Your Website   Good design comes from decisions that designers make in order to have a certain effect.
Heuristic evaluation Functionality: Visual Design: Efficiency:
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance.
Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.
Web Site Design Plan Checklist Web Design Presented by: Angelo Russo #10 11/22/2014Angelo Russo #101.
Academic Presentation Design Creating an Effective Tool for Communicating Your Topic.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
3461 Laying Out Components Principles of Good Screen Design Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer.
1 Web Technologies Planning and Designing Client Websites Copyright © Texas Education Agency, All rights reserved.
Information Architecture & Design Week 3 Schedule -Syllabus Updates -Group Project Finalized -Research Presentations Finalized -IA Methodologies -Class.
Web Design_ Planning stages
36”x48” Landscape Poster Template (Segoe UI Bold 88pts)
The Successful Website
Section 6.1 Section 6.2 Write Web text Use a mission statement
Principles of Good Screen Design
Technical & Research Posters: Text, Visuals, & Presentation
36”x48” Landscape poster template (Title)
Web Site Design Web site diagrams from the Yale Style Manual at:
Elements of Design.
Web Site Design Plan Checklist
Web-design.
Principles of Graphic Design
Business letters and memos
Technical Communication Fundamentals Chapter 3: Visual Design
Define phase Interview the client to understand goals, audience, content, design, and delivery requirements. Organize and outline interview information.
Elements of Design.
PBA Front-End Programming
Designing User-Friendly Documents
Mrs. Metcalfe Computer Applications
PLEASE DELETE THIS SLIDE WHEN YOUR PRESENTATION IS COMPLETE
Fixed Positioning.
36”x48” Landscape Poster Template (Segoe UI Bold 88pts)
PowerPoint Template Navy Cover with Icons.
Unit 14 Website Design HND in Computing and Systems Development
Web Development Life Cycle from Beginning to End…and BEYOND!
PowerPoint Template Navy Cover with Icons.
Design Principles 8-Dec-18.
The good, the bad, & the ugly…
Writing for Communication on the Web
PLEASE DELETE THIS SLIDE WHEN YOUR PRESENTATION IS COMPLETE
Website Planning EIT, Author Gay Robertson, 2018.
Step-3: Principles of Good Interface and Screen Design
10 Rules of Good UI Design to Follow On Every Web Design Project
DELIGHT WITH UX DESIGN RACHEL KORPELLA
Design Principles 5-Apr-19.
Good document design saves time and money, reduces legal problems, and builds goodwill. A well-designed document looks inviting, friendly, and easy to.
Elements of Effective Web Design
Good document design saves time and money, reduces legal problems, and builds goodwill. A well-designed document looks inviting, friendly, and easy to.
Title of presentation | Presentation by [Enter details in 'Header & Footer' field 18/05/2019.
Accessibility Guide.
Web Development Life Cycle from Beginning to End…and BEYOND!
Presentation transcript:

CANVAS Layout and Style for Usability

Aspects of Usability Content Importance, Necessity Aesthetic Interesting, evokes desired emotion Organization Leads reader Navigation Sensible Accuracy/Completeness Name, position, phone number Correctness Grammar, punctuation Communication Coherent, clear Consistency Titles, font & size, alignment Usability refers to the ease with which users interact with site content. It includes:

Layout oco/choco_wireframe.png architecture/ Simple wireframes provide a template for organizing information. Consider your wireframe as a point of reference and not a hard-and-fast framework. Your finished site may not look exactly like the wireframe you create.

Aligning your message with user needs and tracking the location of content is important (particularly for large sites) for two reasons. First, it provides a visual aid for organization and, second, it helps with site maintenance especially if someone other than the site administrator changes. Your Canvas site may not be multilayered, but the principle is still applicable. Alignment and Tracking Alignment Tracking

Tracking content locations: When you name a page (Home in the example), the name does not show in the user’s view, so knowing where specific information is stored in the site can be a timesaver when you need to make a change or addition. For Example…

Style Guide Typeface Heading and Paragraph Fonts Built in Point size, Color Adjust for emphasis (but don’t overdo it) Alignment Bullets and indents Naming conventions Consistent, Concise Photos/Images Focus, Placement, Message A style guide helps large organizations normalize the aesthetic across departments and maintain brand identity. OMC can provide a specific style guide, but using built in style elements is usually a safe bet and can help simplify the design process. Stylistic considerations include:

General Information Each site should include: Information about the role of your group or organization (“About…”) Top of page Contact information (name(s), phone, , building, campus, etc.) Bottom of the home page Usability also describes user expectations. Most users expect to find a description of the organization on the landing (home) page, and contact information either at the bottom of the page or the bottom of the left navigation.

Assessing User Experience (UX) User Experience Do elements work as expected? Can users navigate as desired? Does it maintain user interest (aesthetic and function)? Do users know who to contact if they have questions? Usability Testing Designer test Double-check each element Controlled audience test Someone you know Public audience test Request feedback We all want users to have a pleasant experience on our site. To this end, users need to be able to find the information they are seeking in an aesthetically pleasing environment that makes sense to them. Users tend to avoid sites that do not function as expected. To aid this process, site designers will want to assess UX by asking and answering questions during the design phase. Then, follow up with usability testing.