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.
