StudyGuide-773 UID

Usability specification

A compendium of key factors that determine products usability.

Copyright

A copyright is used to protect an original creative work

Mind map

A diagram used to visually organize information.

Mood board

A mood board is an assemblage of images, colors, textures, words, typography (and sometimes even physical objects) providing designers with a visual and tactile sense of the design they want to create. If a word list paints a design in text, a mood board paints it in pictures.

4 Color schemes

A set of colors constituting an integrated whole for a design. 1- Complementary 2- Analogous 3- Monochromatic 4- Triadic

Site map

A site map is a graphical representation of the structure of a Web site; how its various pages are interconnected The connection scheme is typically hierarchical, with different levels of pages arranged in a tree-like structure. 2-5 levels = Simple site 5-10 levels = Complex site

Metadata

A type of data that provides information about other data in a Web page or site - data about data.

Word list

A word list is a set of words and short phrases describing the intended look and feel of a design

Trademark

A word, phrase, sound, or image that a company uses to distinguish itself or one of its products from the competition.

Grid-based layout

A) Fluid or fixed grid layouts. B) Grids"" B-1: 960 Grid B-2: 1200px Grid B-3: Unsemantic Grid

Web-safe fonts

Fonts you can safely assume are installed on the majority of your users' browsing devices.

Images

"<img src=""imageFile"" width=""numPixels"" height=""numPixels"" alt=""altText"">

Keyword-based techniques for SEO

"These days, however, keywords <meta> tags seem to have lost most, if not all, of their ability to affect ranking" 1- The description <meta> tag 2- The <title> tag 3- The robots and googlebot <meta> tags 4- The notranslate <meta> tag 5- The charset <meta> tag 6- The refresh <meta> tag

Vision statement

*Contain an explicit value and measurable goal **Concise statement of the Website's main goals, vision of its future presence in the online world ***Needs to be Clear and Specific, so each team member unambiguously understands **** Fundamental framework to defining the scope and intent of a site.

Process for validating a website

1) Summative usability testing -Clicks -confusing -load time 2) Code validating 3) SEO -keywords -keyword-related content -keyword variation -Metadata, XML -Mobile friendly

3 phases of scenario-based design

1- Analysis 2- Design 3- Prototype & Eval

Pappas's Ten steps of bottom-up design

1- Brainstorm 2- Categorize content 3- Critique the categories. 4- Revise the categories. 5- Create sitemap 6- Design the navigation 7- Lay out main pages. 8- KISS the Design 9- Design/develop pages, then test w/ users 10- Publish!

Bottom-up design

1- Brainstorm. 2- Categorize the content. 3- Critique the categories. 4- Revise the categories. 5- Design the navigation system. 6- Lay out the main pages. 7- Keep Your Design Simple! 8- Design and develop the site pages, and test them with users. 9- With this step, you have worked your way up from the bottom to the top of the Web site design. 10- Publish the site. Upload your site and go live!

Project documents

1- Budget and billing spreadsheets 2- Work schedules 3- Meeting notes 4- Design document 5- Website style guide

CSS Basics

1- Color: ---> Color name ---> Hexadecimal code ---> RGB value 2- Font: 3- Width: || height: 4- Margin, padding 5- Border 6- Background 7- Float, clear

4 tasks to create a site strategy

1- Define the brand 2- Determine the goal 3- Define the audience 4- Analyze the competition

5 D's of web site production

1- Discover 2- Define 3- Design 4- Develop 5- Deliver

4 typographic rules

1- Font Size 2- Line Spacing 3- Line Length 4- Font Choice

4 parts of web site specification

1- Functionality 2- Content 3- Architecture 4- Design

4 main sections of web page layout

1- Header 2- Navigation 3- Content 4- Footer

6 project phases

1- Information gathering 2- Planning 3- Design 4- Development 5- Testing 6- Delivery and Maintenance

Personal portfolio best practices

1- Make it your top priority 2- Be patient 3- Go for substance, not pizzazz 4- Make sure it looks great 5- Establish the brand of YOU 6- Include a bio 7- Resist the urge for excess 8- Point to the future 9- Contextualize 10- Socialize

Techniques for SEO optimization

1- Marketing 2- Keywords 3- Mobile-Friendliness 4- Metadata 5- Miscellany

Current trends in web design

1- Mobile is the rule, not the exception 2- Responsive design is required 3- Less is more 4- Think BIG! 5- Data visualization 6- Parallax scrolling 7- One-color dominance 8- Long-scrolling pages 9- Human look-and-feel 10- Storytelling

Primary vs secondary navigation

1- Primary pages are Global: Accessible via primary nav elements from everywhere in the site. 2- Secondary pages are Local: Accessible via secondary nav elements only from within a specific section of the site.

7 roles in a web design team

1- Project manager 2- Strategist 3- Content specialist 4- Usability expert 5- Designer 6- Developer 7- Marketer

Hosting pros and cons

1- Shared Server Hosting 2- VPS Hosting 3- Dedicated Server Hosting 4- Cloud Hosting

UCD process

1. Analysis 2. Design 3. Testing

Legal issues to be aware of

1. Anti-spamming laws 2. Intellectual property laws ---a. Copyright ---b. trademark 3. International legal issues

4 Key cognitive processes

1. Attention 2. Memory 3. Perception 4. Learning

4 Keys analytics reveal about site visitors

1. Conversions 2. Pages per visit, time per visit 3. Bounce rate 4. Exit pages

8 navigation principles

1. Design for users 2. Make navigation controls visible 3. Provide multiple navigation options 4. Provide clear positional awareness for users 5. Be consistent 6. Follow conventions 7. Use clear and descriptive names 8. Quickly and easily!

Process to create navigation

1. Determine the navigational needs of your users 2. Design a first version of a navigation system that meets your users' needs ---> a. make an annotated site map ---> b. Decide which navigation elements ot use ---> c. Choose color and typography schemes for the navigation elements ---> d. Create the navigation elements ---> e. Lay out the navigation elements 3. Create a working prototype of the navigation system 4. Test the navigations system on real-world users 5. Based on test results, decide if the system needs more work

3 phases of participatory design

1. Discovery 2. Evaluation 3. Prototyping

Limitations of frameworks

1• You learn the framework, not the underlying languages. 2• Frameworks are limited. 3• Framework code is public. 4• Customizing a framework can be difficult. 5• Framework code is not your code. 6• It can be difficult to decide whether or not to update a framework. 7• Frameworks can make extra work for development teams.

Ethical practices for web professionals

1•Adhere to copyright laws. 2•Do not knowingly spread malicious code such as viruses, worms or Trojan horses. 3•Do not send spam. 4•Respect the privacy of your users. 5•Be honest with your customers & do not overcharge for technical services that they may not be aware of or understand. 6•Communicate clearly & respectfully to your site users.

ERBU

1. Emphasis — Make some objects stand out more than others. ---> Contrast: hue, size, weight, shape, etc. ---> Placement: good ""hot spots"" for emphasis include the top left corner, top right corner, and center of the page. ---> Isolation: placing an object by itself against a non-intrusive background makes it a focal point. 2. Rhythm— Move the viewer's eyes through the design. ---> Repetition — repeat one or more visual objects in a regular, perceptible pattern. ---> Alternation — repeat two or more objects in an alternating pattern: AB, AB, AB, etc. ---> Progression — repeat a series of objects, changing them slightly with each iteration. ---> Undulation — a smooth progression of rising, falling, or weaving objects. 3. Balance — Maintain visual equilibrium in the design. ---> Symmetry — visual symmetry creates a pattern that feels balanced to both the conscious and unconscious mind. Use it sparingly! Too much symmetry can weaken the dynamic motion of an image, halt its rhythm. Being compellingly off-balance tends to keep viewers more engaged than perfectly symmetrical. ---> Grids — you should always work with grids when laying out your Web pages. 4. Unity — Infuse the whole image with a sense of oneness.

7 principles of universal design

1. Equitable use 2. Flexibility in use 3. Simple & intuitive use 4. Perceptible information 5. Tolerance for error 6. Low physical effort 7. Size & space for approach & use.

Benefits of prototypes

1. Helps you identify design problems early 2. Helps you iterate more quickly 3. Helps you compare design solutions 4. Helps you get meaningful design feedback 5. Helps you present design ideas to stakeholders 6. Helps you perform user testing early 7. Helps you save time and money

Guidelines for building a successful brand

1. Know your audience 2. Be unique 3. Be consistent 4. Promote, promote, promote! a. Display logo on every page b. Consistently use colors associated with brand 5. Create a brand style guide

6 attributes to measure product's usability

1. Learnability 2. Efficiency 3. Memorability 4. Errors 5. Satisfaction 6. Utility

11 common navigation elements

1. Navigation bars 2. Drop-down menus 3. Hamburger menus 4. Inline links 5. Breadcrumb trails 6. Footers 7. Site search 8. Site maps 9. Tag clouds 10. Pagination 11. Guided navigation

7 steps of usability testing

1. Plan and prepare 2. Run the test 3. Collect the data --->Quantitative data --->Qualitative data 4. Analyze the data 5. Draw conclusions 6. Document the results 7. Redesign based on the results

Benefits of UCD

1. Reduced development time 2. Increased user satisfaction

6 design principles

1. Structure - organize the user interface into a form that is clearly understandable for the user. 2. Simplicity -design should make common tasks easy to perform and that it should communicate clearly in the user's native language. 3. Visibility -make all the necessary tools and options for a task clearly visible to the user, and should not burden the user with superfluous information. 4. Feedback - keep the user informed of errors and changes of state through textual, visual or audio communication. 5. Tolerance - be flexible and forgiving. It should minimize the occurrence of user errors. And it should reduce the consequence of the errors that do manage to slip through by enabling users to easily undo and redo their actions. 6. Reuse - reuse objects and behaviors to maintain consistency, and to minimize the need for users to rely on thought and memory.

7 user analysis methods

1. Usability testing 2. Context interviews 3. Diary studies 4. Ethnographic shadowing 5. Surveys 6. User workshops 7. Feedback forms

3 Key UCD principles

1. User focus 2. Testing 3. Iteration

10 design principles from cognitive psychology

1. Users dislike having to think and work hard to get tasks done. 2. Users have limitations 3. Users make mistakes 4. Memory is fragile 5. Users are social animals 6. Users have selective attention 7. Users crave information 8. Users are driven by their unconscious mind 9. Users rely on mental models 10. Users have imperfect vision

Steps to create wireframe

1. Write a list of all the objects you want to include in the wireframe. 2. Sketch the wireframe by hand, making sure to include each object in the list. 3. Use a computer to make your wireframe sketch into a wireframe graphic.

Strategies for navigation across devices

1• Design a "mobile-first" perspective in which the site has to scale up or down. 2• Build at least a temporary ""media query"" selection into your main CSS file.

6 key benefits of using a framework

1• Efficiency 2• Security 3• Cost 4• Support 5• Simplicity 6• Reliability

5 techniques to ensure positional awareness

1• Include descriptive heading (or title) on each page. 2• Assign different colors to the main site sections 3• Assign different background images to different site sections 4• Include breadcrumb trails 5• Include a site map

Techniques to identify site audience

1• Start by asking the right questions 2• Interview users 3• Research competitors sites 4• Use web analytics tools

User personas

1• You can design for one or a few personas to meet the needs of many actual users. 2• A vivid persona can inspire designers to care more about product usability. 3• Researching and creating personas helps heal Designer's Disease by getting you to see things from the perspective of your users. 4• Personas help designers avoid the trap of building what users ask for rather than what they actually need. 5• Disagreements among team members over design decisions can be resolved by referring back to the personas. 6• Design efforts can be prioritized based on persona levels: primary, secondary, tertiary

7 disadvantages of using a framework

1• You learn the framework, not the underlying languages. 2• Frameworks are limited. 3• Framework code is public. 4• Customizing a framework can be difficult. 5• Framework code is not your code. 6• It can be difficult to decide whether or not to update a framework. 7• Frameworks can make extra work for development teams.

3 categories of colors

1•Warm (stimulating, foreground) colors: reds, oranges, yellows 2•Cool (calming, background) colors: greens, blues, purples 3•Neutral colors: black, white, grays

Hyperlinks

<a href="linkURL">linkText</a>

Benefits of CMS (Content Mgmt Sys)

An application enabling developers and end users to create, review, edit, and publish Web site content."

User Centered Design

An approach to the design of an interactive system (Web site, app, game, etc.) that has as its main goal the satisfaction of the users of that system.

Image maps

An image containing 1=< "hot spots" areas, when clicked on: Jump to different linked pages.

4-phase agile process

An iterative design process consisting of four phases: 1- Discover 2- Design 3- Develop 4- Test

Quality assurance

An umbrella term for a set of procedures (usability testing, code validation, site optimization, etc.) ensuring a site's form and function are of high quality.

Basic HTML elements

Basic elements: <html>...</html> <head>...</head> <body>...</body> <p>...</p> Some of the 13 ""semantic"" elements: <header> <nav> <main> <footer> Extras: <h1> <blockquote> <ul> || <ol> <li> <table> <tr> <td>

White space

Blank space used to separate objects in a design. Can be color, not just white. Also called empty, blank, or negative space.

Wireframes

Blueprint-like diagram of a user interface.

Use case scenario

Concrete version of use case: A story of how one specific actor uses a system.

Qualitative data

Consists of what the subject says, how she behaves, her emotional affect, body language, facial expressions, etc.

Creating a site maintenance plan

Content Performance Functionality User Feedback

Layout columns

Content boxes (HTML <div> elements) divide a page width-wise into layout columns

Techniques for branding

Display the company logo on every page, generally in the upper-left corner. If the logo is quite large, consider using the large size for the home page and a smaller version for the other site pages. If the company does not have a logo, or if the logo is weak, it should spend the money to hire a good professional logo designer to create one. Going with a cheap or amateurish logo will do (much) more harm than good. It is not a place to cut corners. Consistently use colors associated with the brand. This is a form of subliminal advertising, in that it establishes a company-brand-colors connection in the subconscious mind.

Custom page templates

Divide your site pages into two groups: A1- Default pages B1- Custom pages B2- Blog pages B3- E-commerce pages B4- Form pages

Web site operation manual

Document describing in detail how to operate, maintain & customize a site. To create WSOM: 1- Make master index 2- Describe unique elements 3- Logic behind code 4- Bug log 5- Change log 6-Compile the above in a document 7- Format the document

WYSIWYG editors

Dreamweaver && CoffeeCup.

Use case document

Elements of "Use Case Documents": • Name — presented as Actor-verb-goal: Student registers for courses • Goal — task to be accomplished (job to be performed) • Description — brief description of use case • Actor(s) — primary (and, optionally, secondary) actor(s) • Preconditions — state of the system before the use case • Main Success Scenario — what the actor needs to do to meet the goal • Extensions — use cases that extend the base use case • Post conditions — state of the system after the goal is met

Agile design

Emphasizes on cross-functional teams, fosters design flexibility, rapid development of prototypes, continuous improvement, and early delivery of the final product.

Responsive design

Equally usable - on all types and sizes of devices: desktops, tablets, cell phones, smart watches, etc.

Web form basics

Forms can be created using only HTML, but JavaScript, CSS, and server-side languages like PHP can be used to enhance them. HTML cannot store or process data by itself, so an HTML form must send the data somewhere, often to a Web page that has embedded code designed to handle it. This does not have to be a separate page, and it is a common practice for the code to exist on the same page as the form. The server-side code, in turn, adds the data to your Web site's database.

Choosing the right CMS

Functionality Usability Administration Customization Security Support Scalability

Get and Post

GET and POST are "request methods" built into a Web browser's underlying code. POST comes into play, invisibly, when data is entered into a form and a "Submit" button is clicked. The POST method sends that data to the server that hosts your Web site to be processed in some way. That might be a database. GET, in turn, is the method for pulling that stored data from the database for your use.

Roles of HTML & CSS

HTML=Structure CSS=Style

3 navigation structures

Hierarchical Sequential Web-like

Mockups

High-fidelity graphic images of Webpages

Quantitative data

Includes measurable things like the time (seconds or minutes) it takes to complete a task, number of clicks, pages, menus, levels, the error count, and so on.

Kerning and leading

Kerning: Adjustment of horizontal space between characters. Leading: Line spacing- Vertical

Guidelines for branding

Know your audience. Trying to appeal to everyone dilutes a company's brand, robs it of the focus it needs to grow strong. Successful brands know their audience very well — their needs, expectations, interests, etc. — and target this audience in their branding efforts. Be unique. A successful brand says ""I am unique. You will not find anything quite like me anywhere else."" Have you identified your unique product or service? If not, start there when building your branding strategy. Be consistent. When consumers return to a company for repeat purchases, they expect to receive the same quality as they did the first time. Inconsistent product or service quality is one of the main reasons people take their business to a competitor. Promote, promote, promote! For a brand to become successful, it needs to spread like a meme through the consumer population. This requires self-promotion through advertising, social media, word of mouth, etc. The Internet is a boon to companies with modest promotion budgets, as it can spread the word to a global market for very little money. Create a brand style guide: a document that defines and presents examples of what your brand looks like and how it should come off feeling to customers.

Spelling and grammar tools

MS Word Grammarly Ginger After-the-deadline Etc.(plugins[Wordpress, Joomla, Drupal, ect)

How to attract and retain users

Personalize users experience by displaying their name, visual preferences (colors, layout, text size, etc.), products suited to their profile, and so on.

Mobile-friendly rankings

Pick the right site configuration Responsive design Dynamic serving Parallel URLs *Google* ---> Design pages to load and render quickly ---> Optimize page UIs for touchscreen finger gestures ---> Do not block CSS or JavaScript ---> Don't use Flash ---> Don't use Pop-Ups

10 Emotions of colors

Red — The warmest of the warm colors, red tends to be very stimulating. It commands viewer attention, hence its use as an alarm to signal danger, and to signal ""stop,"" literally. Generally, you should use red sparingly to emphasize one or a few focal-point elements of a page. Orange — Orange has enough of red's vitality to make it energetic, but it is not as arousing as red. It is commonly used to show cheerfulness and playfulness. Yellow — Yellow is a chameleon, changing its affect quite dramatically depending on its shade. Bright yellow is extremely stimulating (so much so that you need to exercise caution when using it), dark yellow (such as gold) lends an air of elegance and antiquity to a design, and mid-yellow shades tend to be warm and welcoming. Green — A bridge between the warm and cool colors, green is both stimulating and relaxing. Think of lying in a cool field on a warm sunny day. It generally conveys growth, both natural (the environment) and financial (money). At a basic level it is also used to signal ""go."" Blue — The coolest of the cool colors, light blue is inviting and safe. Facebook and Twitter both take advantage of the socially disarming quality of light blue. Darker shades of blue tend to come off as more serious and professional than lighter shades. Banks and financial companies often use medium to dark blues. Purple — Purple is a complex color that evokes a sense of royalty, luxury, sometimes even decadence. Lighter shades of purple are associated with romantic love, while darker ones suggest mystery and hidden depths. Black — Black is a visual magnet, commanding viewer attention. It should be used sparingly, so as to not completely dominate the design. Black is associated with power, elegance and formality. It is also associated with evil and death, another reason why you should exercise caution when using it. White — White tends to gently repel viewer attention. This makes it the perfect contrast to other colors in a design. When used as foreground, white lends purity and virtue to the whole. In the background, it diverts attention to more stimulating elements. Gray — A bridge between black and white, gray is the most neutral of all colors. Brightening or darkening its shade can give it varying degrees of black's attention-drawing and white's attention-repelling qualities, making it a uniquely powerful tool in the hands of a skilled designer.

3 site security attacks

Social Engineering DOS Brute-Force Attacks

Less & Sass

Style sheet languages specifying how structured documents are presented.

TAR process

TAR is a part of the iterative testing in the Testing Phase: -- Test, Assess, Redesign

4 types of navigation icons

Text Images image map Buttons

RGB vs CMYK

The RGB model is used to specify colors for a digital display device (screen, monitor) All Three 0=Black All Three F=White The CMYK model is used to specify colors for a printed item (magazine page, brochure, poster, etc.) All four 0=White All four F=Black (yes, not just ""K"")

User analysis

The collection and analysis of user data to help understand the characteristics and behaviors of these users. Key ideas: 1. What users want 2. How they use the product 3. What UI-related problems they have using the product

Licensing Content

The content owner establishes the terms of the license: how and where the content can and cannot be used, and what the owner will receive for granting use of the content, such as fees, credit attribution, etc.

User interface design

The planning and creation of a set of controls enabling a user to interact with a computer device

Three-click rule

The threshold to get to the desired information on a Web site is generally held to be three clicks. But any more than five is usually unacceptable

Card sorting

There are two types of card sorting: open and closed.

W3C guidelines

Three categories: 1- visibility 2- operability 3- understandability

Categories of typefaces

Two main: 1- Serif 2- Sans-serif Three secondary: 3- Cursive 4- Fantasy 5- Monospace

URL structure

URLs can be similar to breadcrumb trails, in that both present a trail through the site that leads to the current page

User interface design patterns & libraries

^^^A User Interface Design (UID) pattern is a *reusable* solution to a *common* UID problem. This can be a software (coding) problem, a visual design problem, or a mix. ^^^ UID Pattern Libraries present images (screenshots) of useful design patterns and (occasionally) text descriptions of how these patterns solve particular problems. Common patterns by categories 1) Data Input ---> Account Registration ---> Calendar Picker ---> Wizard 2) Image display ---> Gallery ---> Image Zoom ---> Slideshow 3) Navigation ---> Breadcrumbs ---> Drop-down menus ---> Navigation Tabs 4) E-commerce ---> Paywall ---> Shopping cart 5) Miscellaneous ---> Progressive disclosure

Best practices to secure a site

^combat ""Brute-Force Attacks"" ---> Account lockout ---> Complex password requirements ---> CAPTCHA test Attempt pen test before publishing to the Web Server. *Ensure that all of your Web site security applications are up to date. *Ensure that all of these applications are correctly configured. *Ensure that all users have strong passwords. *Ensure that all users and groups have the correct permissions.

Order of HTML elements

orientation and/or sequence of "Basic HTML elements"?

CARP

• Contrast — To separate objects, vary their appearance strongly. • Alignment — Align objects with other objects. • Repetition — Repeat elements of the design. • Proximity — To associate objects, place them near each other.

Web security threats

• Social Engineering. • Denial-of-Service attacks. • Brute-Force attacks.

Final steps of web development process

• Usability testing • Validate code • Quality assurance • Securing the site

Universal accessibility

•One that offers equal - equivalent - usability for all users. •Equivalent stipulation is important cause some functions cannot be translated directly from abled to disabled users.

Accessibility issues in color and fonts

•Slower page loads. •Larger text tends to decrease readability by making it more difficult for people to scan text lines quickly and fluently. Straining users' eyes is not a good way to attract them back to your site.