Usability testing is a technique used to evaluate a website or application by testing it with real users. It involves having users complete typical tasks while observing them to identify any usability issues or areas for improvement. The key steps in usability testing include orienting users, having them complete tasks while thinking aloud, and debriefing afterwards. Findings from usability testing include both quantitative data like task completion times as well as qualitative data from user feedback, which are then analyzed together to form recommendations.
Usability testing involves having representative users complete tasks on a website or prototype while being observed. This helps identify usability issues and ensure the site is effective, efficient and satisfying to use. The document discusses various usability testing methods like surveys, interviews and eye tracking studies. It provides guidance on planning a test, analyzing both qualitative and quantitative data collected, and using the results to improve the design.
This document outlines the basic principles of user-centered design (UCD). It discusses how UCD prioritizes users by putting them at the center of design decisions through iterative testing and research. The goal is to optimize the user experience. Key aspects of UCD include discovering user needs through research, defining concepts based on personas, designing prototypes, and evaluating designs through usability testing to identify problems and continually improve the design.
A high level broad stroke intro to User eXperience, starting with a survey, a dash of my own thoughts, some thoughts from Mike Rapp, and some samples and resources. Also some slides from a presentation I did for Great American Teach in in 2014 to 3rd and 5th graders.
Information Architecture Basics,
Main components of IA: organization schemes, structure, labeling, logic, search
Card sorting, Tree testing, IA performance, Content modeling, Task Flows, Site Maps
Usability and User Experience Training Seminarlabecvar
This presentation describes a day-long seminar for giving participants an overview of best practices in usability design and research. Also included are several hand-on exercises to be done throughout the day to solidify participants' understanding of course concepts.
The document provides guidance on designing effective navigation and information architecture for websites. It discusses how navigation should be invisible to users and focus on their tasks rather than business goals. Common elements of navigation like global navigation bars, sub-navigation, and breadcrumbs are described. The document also highlights mistakes to avoid, such as using vague labels and not involving users in design.
Introduction to Lean UX Methods - General AssemblyDoralin Kelly
This document provides an introduction to Lean UX methods taught by General Assembly. It discusses key Lean UX practices like defining goals and KPIs, designing to solve user problems through collaboration, testing assumptions by gathering user feedback, and iterating based on findings. The document demonstrates these practices hands-on by having attendees split into teams to create user personas and use cases, prototype a wireframe, and conduct user testing and evaluation on their designs. Metrics like acquisitions, activation, retention, referral, and revenue are presented as important to measure based on actual user data rather than assumptions.
Usability testing involves having representative users complete tasks on a website or prototype while being observed. This helps identify usability issues and ensure the site is effective, efficient and satisfying to use. The document discusses various usability testing methods like surveys, interviews and eye tracking studies. It provides guidance on planning a test, analyzing both qualitative and quantitative data collected, and using the results to improve the design.
This document outlines the basic principles of user-centered design (UCD). It discusses how UCD prioritizes users by putting them at the center of design decisions through iterative testing and research. The goal is to optimize the user experience. Key aspects of UCD include discovering user needs through research, defining concepts based on personas, designing prototypes, and evaluating designs through usability testing to identify problems and continually improve the design.
A high level broad stroke intro to User eXperience, starting with a survey, a dash of my own thoughts, some thoughts from Mike Rapp, and some samples and resources. Also some slides from a presentation I did for Great American Teach in in 2014 to 3rd and 5th graders.
Information Architecture Basics,
Main components of IA: organization schemes, structure, labeling, logic, search
Card sorting, Tree testing, IA performance, Content modeling, Task Flows, Site Maps
Usability and User Experience Training Seminarlabecvar
This presentation describes a day-long seminar for giving participants an overview of best practices in usability design and research. Also included are several hand-on exercises to be done throughout the day to solidify participants' understanding of course concepts.
The document provides guidance on designing effective navigation and information architecture for websites. It discusses how navigation should be invisible to users and focus on their tasks rather than business goals. Common elements of navigation like global navigation bars, sub-navigation, and breadcrumbs are described. The document also highlights mistakes to avoid, such as using vague labels and not involving users in design.
Introduction to Lean UX Methods - General AssemblyDoralin Kelly
This document provides an introduction to Lean UX methods taught by General Assembly. It discusses key Lean UX practices like defining goals and KPIs, designing to solve user problems through collaboration, testing assumptions by gathering user feedback, and iterating based on findings. The document demonstrates these practices hands-on by having attendees split into teams to create user personas and use cases, prototype a wireframe, and conduct user testing and evaluation on their designs. Metrics like acquisitions, activation, retention, referral, and revenue are presented as important to measure based on actual user data rather than assumptions.
A general overview and intro to User Experience and User Interfaces by Robby Grant, Gabe Martin and David Sparks at Archer Malmo.
Talk was given at StartCo in Memphis TN, May 24th, 2017 to help new startups improve the functionality and focus on users during early stages of development.
3 Methods to Master Agile UX Testing | UserZoom WebinarUserZoom
This document summarizes a webinar on 3 methods for agile UX testing: screenshot click testing, tree testing, and task-based testing. Screenshot click testing involves showing participants screenshots and tracking where they click to evaluate designs, navigation, and attention. Tree testing measures how effectively users can navigate and find content in an information architecture without visual cues. Task-based testing observes how users complete tasks and identifies usability issues. The webinar provided details on setting up and analyzing each method to address common UX challenges in agile development like limited time and iterative design changes.
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over TimeUXPA International
Benchmarking allows you to track UX progress over time, giving you an indication of how successful digital platform changes have been. It provides a holistic product assessment and requires greater attention to methodology, stakeholders, tasks, protocol, and analysis than a typical feature study does. Our method captures quantitative measures, along with qualitative feedback, for product stakeholders to use to justify and inform their business decisions.
In this session, you’ll get tips for developing a benchmark strategy. You’ll also hear stories about how benchmarks have impacted our organization’s digital strategy.
You will learn:
The business impact of benchmark studies
Designing, running, and analyzing such studies
How to avoid issues with recruiting, study design, execution, reporting
A variety of UX and product professionals, including seasoned researchers, novice designers, and digital product owners can learn and take action from this session.
Explores web usability and offers approaches to make web sites easy to use for an end-user, without requiring the user to undergo any specialized training. Creating websites that intuitively relate the performance actions needed on the web page to the user’s experience and expectations, the web designer/developer is able to present the information to the user in a clear and concise way, to give the correct choices to the users, in a very obvious way, to remove ambiguity regarding the consequences of an action and put the most important thing in the right place on a web page or a web application.
The Whole is Greater than the Sum of its Parts - The art of war.
In the same way that a good written document (like a report, or newspaper article) should be arranged in a certain way to make it more accessible to readers, it’s a good idea to structure your webpages so they are easy for Google and the other search engines to crawl and understand.
This guide covers top-line and technical details around modern content structure and UX as is affects search optimization.
Please feel free to share.
Basic principles of Usable Interface
Learnability, Efficiency, Memorability, Errors, Satisfaction
Utility - does it what you need?
How to improve Usability
Includes the definition, value, usage and history of heuristics as well as 10 principles with starter questions for use in an evaluation. (As presented most recently at Interaction 12 in Dublin)
The document provides an overview of best practices for designing mobile user experiences. It discusses principles like designing for touch, legibility, speed, and fluidity. It also covers topics such as using grids, differentiating interactive and static elements, providing feedback, and testing prototypes with users. The workshop will include designing a mobile site prototype, building it, and doing user testing to understand how real people use the design.
This document provides an overview of various user experience design methods and techniques for structuring a UX process. It describes affinity mapping, card sorting, task analysis, user flows, goals and actions, and the Montenashi approach. The document is organized with section headings for strategy, information architecture, user flows, and implementing a strategy. It provides brief explanations and examples for each method.
User Interface and User Experience - A Process and Strategy for Small TeamsDamon Sanchez
This document outlines a process and strategy for designing user interfaces and experiences for small teams. It discusses defining users, creating personas, mapping user journeys, testing prototypes, and gathering metrics. The core facets of user-centric design are presented, including user definition, requirements gathering, wireframes, and design. An example project lifecycle is shown with stages like analysis, scenarios, wireframes, design, and approval. The importance of backing assumptions with real user data is also discussed.
UX Workshop for Fin-Tech startups @ SBCDoralin Kelly
This document provides guidance on user experience (UX) design for fintech startups. It discusses why good design matters, what constitutes good UX design, and how to create good UX. The key aspects of UX design covered are: understanding users through user personas and use cases, designing with a user-centered approach through analysis, design, and testing, simplifying designs based on data from users, and obtaining feedback through user testing of prototypes. The overall message is that UX design should be purpose-driven, problem-solving, and focused on meeting user needs through iterative testing and refinement.
This document provides an overview of the topics to be covered in the first week of a UX design course. The week will introduce students to UX principles and processes, and focus on interviewing techniques. Key topics include defining good UX, UX principles like collaboration and understanding users, the UX design process from problem definition to prototyping, and best practices for planning and conducting user interviews. Students will practice interview skills in class and are assigned to interview 3 potential users for their project as homework.
This document discusses guerrilla usability testing techniques. It explains that guerrilla testing is an informal testing method that can be done with minimal equipment like a computer, moderator, and video recorder to capture user interactions. Some benefits of guerrilla testing are that it is low cost, provides qualitative insights, and can be done continuously throughout the development process. Examples highlighted include Microsoft's extensive usability testing for Halo 3 that helped identify and address user frustrations.
How to Master UX Testing in an Agile Design ProcessUserZoom
This document discusses how to integrate user experience (UX) testing into an agile design process. It begins by outlining common myths about agile and UX testing, such as the idea that they are incompatible or that testing requires working code. The document then presents different approaches to testing in an agile context, such as the 3x3 method of testing multiple early concepts, the RITE method of refining one concept faster through iterations, and A/B testing to refine details at the end. It emphasizes removing waste from traditional UX processes and leveraging remote automated user testing to scale usability testing within short agile sprints. Finally, it provides tips for more agile UX testing like defining target metrics for
Going from Here to There: Transitioning into a UX Careerdpanarelli
A lot of people are curious about transitioning into the field of User Experience Design (UX). In this talk, I talk about a few different ways that you can transition into a UX career, be it grad school, night classes, or the ol' school of hard knocks, backed up by case studies. This talk was given at NoVA UX Meetup in the offices of AddThis, hosted by organizer Jim Lane.
The document provides an overview of user experience (UX) design. It defines UX as a person's emotions and attitudes about using a product or service. UX design aims to enhance user satisfaction by improving usability, accessibility, and the overall user experience. The document recommends that developers learn basic design principles and work with UX designers. It also stresses the importance of accessibility and following guidelines like WCAG to ensure all users can access websites.
The document provides an overview of Lean UX, designing for mobile, and why enterprise UX is awesome. It discusses Lean UX methodology and practices like defining goals, designing, and testing and refining. It also covers principles of mobile design like designing for touch, legibility, and speed. Finally, it notes that while enterprise software is often seen as dull, startups are shifting perceptions by making enterprise tools easy to use, adopt, and roll out.
This document provides an overview of UX fundamentals for startups. It discusses what UX is, how it differs from UI, and how UX works with data. Lean UX approaches for startups are explained, including techniques like user research, personas, card sorting, wireframes, prototypes, and A/B testing. A variety of free and affordable UX tools are also listed.
UXPA Lean UX Bridging the gap between UX and DevelopersAndrew Mottaz
Lean UX is an approach that bridges UX and development by focusing on early and frequent user testing of prototypes. This helps build a shared understanding across teams through discovering user needs together. Key aspects include embedding UX in cross-functional Agile teams, prototyping at varying levels of fidelity, and testing assumptions with real users regularly throughout the design and development process. The goal is to iteratively learn and improve the product based on direct user feedback.
This document provides information about website usability. It discusses key usability concepts like affordances, signifiers, mental models, and the ten usability heuristics. It also covers best practices for designing websites with users in mind, such as using clear navigation, limiting distractions, and making important information easily visible without requiring excessive scrolling. The document emphasizes that usability testing is important to evaluate designs from the user's perspective.
The document provides an overview of a web design intensive course. It includes objectives for the course, which focuses on usability assessment, building a portfolio, and the business aspects of web design. It outlines several workshops and topics that will be covered, including usability principles and testing, user-centered design, and Nielsen's 10 usability heuristics. Students are asked to complete tasks like analyzing websites and providing usability reviews for a blog.
A general overview and intro to User Experience and User Interfaces by Robby Grant, Gabe Martin and David Sparks at Archer Malmo.
Talk was given at StartCo in Memphis TN, May 24th, 2017 to help new startups improve the functionality and focus on users during early stages of development.
3 Methods to Master Agile UX Testing | UserZoom WebinarUserZoom
This document summarizes a webinar on 3 methods for agile UX testing: screenshot click testing, tree testing, and task-based testing. Screenshot click testing involves showing participants screenshots and tracking where they click to evaluate designs, navigation, and attention. Tree testing measures how effectively users can navigate and find content in an information architecture without visual cues. Task-based testing observes how users complete tasks and identifies usability issues. The webinar provided details on setting up and analyzing each method to address common UX challenges in agile development like limited time and iterative design changes.
UXPA2019 Building Your Benchmark: How to Measure UX for Product Impact Over TimeUXPA International
Benchmarking allows you to track UX progress over time, giving you an indication of how successful digital platform changes have been. It provides a holistic product assessment and requires greater attention to methodology, stakeholders, tasks, protocol, and analysis than a typical feature study does. Our method captures quantitative measures, along with qualitative feedback, for product stakeholders to use to justify and inform their business decisions.
In this session, you’ll get tips for developing a benchmark strategy. You’ll also hear stories about how benchmarks have impacted our organization’s digital strategy.
You will learn:
The business impact of benchmark studies
Designing, running, and analyzing such studies
How to avoid issues with recruiting, study design, execution, reporting
A variety of UX and product professionals, including seasoned researchers, novice designers, and digital product owners can learn and take action from this session.
Explores web usability and offers approaches to make web sites easy to use for an end-user, without requiring the user to undergo any specialized training. Creating websites that intuitively relate the performance actions needed on the web page to the user’s experience and expectations, the web designer/developer is able to present the information to the user in a clear and concise way, to give the correct choices to the users, in a very obvious way, to remove ambiguity regarding the consequences of an action and put the most important thing in the right place on a web page or a web application.
The Whole is Greater than the Sum of its Parts - The art of war.
In the same way that a good written document (like a report, or newspaper article) should be arranged in a certain way to make it more accessible to readers, it’s a good idea to structure your webpages so they are easy for Google and the other search engines to crawl and understand.
This guide covers top-line and technical details around modern content structure and UX as is affects search optimization.
Please feel free to share.
Basic principles of Usable Interface
Learnability, Efficiency, Memorability, Errors, Satisfaction
Utility - does it what you need?
How to improve Usability
Includes the definition, value, usage and history of heuristics as well as 10 principles with starter questions for use in an evaluation. (As presented most recently at Interaction 12 in Dublin)
The document provides an overview of best practices for designing mobile user experiences. It discusses principles like designing for touch, legibility, speed, and fluidity. It also covers topics such as using grids, differentiating interactive and static elements, providing feedback, and testing prototypes with users. The workshop will include designing a mobile site prototype, building it, and doing user testing to understand how real people use the design.
This document provides an overview of various user experience design methods and techniques for structuring a UX process. It describes affinity mapping, card sorting, task analysis, user flows, goals and actions, and the Montenashi approach. The document is organized with section headings for strategy, information architecture, user flows, and implementing a strategy. It provides brief explanations and examples for each method.
User Interface and User Experience - A Process and Strategy for Small TeamsDamon Sanchez
This document outlines a process and strategy for designing user interfaces and experiences for small teams. It discusses defining users, creating personas, mapping user journeys, testing prototypes, and gathering metrics. The core facets of user-centric design are presented, including user definition, requirements gathering, wireframes, and design. An example project lifecycle is shown with stages like analysis, scenarios, wireframes, design, and approval. The importance of backing assumptions with real user data is also discussed.
UX Workshop for Fin-Tech startups @ SBCDoralin Kelly
This document provides guidance on user experience (UX) design for fintech startups. It discusses why good design matters, what constitutes good UX design, and how to create good UX. The key aspects of UX design covered are: understanding users through user personas and use cases, designing with a user-centered approach through analysis, design, and testing, simplifying designs based on data from users, and obtaining feedback through user testing of prototypes. The overall message is that UX design should be purpose-driven, problem-solving, and focused on meeting user needs through iterative testing and refinement.
This document provides an overview of the topics to be covered in the first week of a UX design course. The week will introduce students to UX principles and processes, and focus on interviewing techniques. Key topics include defining good UX, UX principles like collaboration and understanding users, the UX design process from problem definition to prototyping, and best practices for planning and conducting user interviews. Students will practice interview skills in class and are assigned to interview 3 potential users for their project as homework.
This document discusses guerrilla usability testing techniques. It explains that guerrilla testing is an informal testing method that can be done with minimal equipment like a computer, moderator, and video recorder to capture user interactions. Some benefits of guerrilla testing are that it is low cost, provides qualitative insights, and can be done continuously throughout the development process. Examples highlighted include Microsoft's extensive usability testing for Halo 3 that helped identify and address user frustrations.
How to Master UX Testing in an Agile Design ProcessUserZoom
This document discusses how to integrate user experience (UX) testing into an agile design process. It begins by outlining common myths about agile and UX testing, such as the idea that they are incompatible or that testing requires working code. The document then presents different approaches to testing in an agile context, such as the 3x3 method of testing multiple early concepts, the RITE method of refining one concept faster through iterations, and A/B testing to refine details at the end. It emphasizes removing waste from traditional UX processes and leveraging remote automated user testing to scale usability testing within short agile sprints. Finally, it provides tips for more agile UX testing like defining target metrics for
Going from Here to There: Transitioning into a UX Careerdpanarelli
A lot of people are curious about transitioning into the field of User Experience Design (UX). In this talk, I talk about a few different ways that you can transition into a UX career, be it grad school, night classes, or the ol' school of hard knocks, backed up by case studies. This talk was given at NoVA UX Meetup in the offices of AddThis, hosted by organizer Jim Lane.
The document provides an overview of user experience (UX) design. It defines UX as a person's emotions and attitudes about using a product or service. UX design aims to enhance user satisfaction by improving usability, accessibility, and the overall user experience. The document recommends that developers learn basic design principles and work with UX designers. It also stresses the importance of accessibility and following guidelines like WCAG to ensure all users can access websites.
The document provides an overview of Lean UX, designing for mobile, and why enterprise UX is awesome. It discusses Lean UX methodology and practices like defining goals, designing, and testing and refining. It also covers principles of mobile design like designing for touch, legibility, and speed. Finally, it notes that while enterprise software is often seen as dull, startups are shifting perceptions by making enterprise tools easy to use, adopt, and roll out.
This document provides an overview of UX fundamentals for startups. It discusses what UX is, how it differs from UI, and how UX works with data. Lean UX approaches for startups are explained, including techniques like user research, personas, card sorting, wireframes, prototypes, and A/B testing. A variety of free and affordable UX tools are also listed.
UXPA Lean UX Bridging the gap between UX and DevelopersAndrew Mottaz
Lean UX is an approach that bridges UX and development by focusing on early and frequent user testing of prototypes. This helps build a shared understanding across teams through discovering user needs together. Key aspects include embedding UX in cross-functional Agile teams, prototyping at varying levels of fidelity, and testing assumptions with real users regularly throughout the design and development process. The goal is to iteratively learn and improve the product based on direct user feedback.
This document provides information about website usability. It discusses key usability concepts like affordances, signifiers, mental models, and the ten usability heuristics. It also covers best practices for designing websites with users in mind, such as using clear navigation, limiting distractions, and making important information easily visible without requiring excessive scrolling. The document emphasizes that usability testing is important to evaluate designs from the user's perspective.
The document provides an overview of a web design intensive course. It includes objectives for the course, which focuses on usability assessment, building a portfolio, and the business aspects of web design. It outlines several workshops and topics that will be covered, including usability principles and testing, user-centered design, and Nielsen's 10 usability heuristics. Students are asked to complete tasks like analyzing websites and providing usability reviews for a blog.
The document discusses usability and user-centered design. It emphasizes understanding users through personas and field research. It provides guidelines for navigation design including identifying audiences and tasks, choosing grouping strategies, and best practices. It also covers content design, visual design, and testing usability.
This document discusses user experience (UX), user interface (UI), and usability. It defines each term and explains that UX encompasses the entire experience a user has with a product, including visual design, while UI refers specifically to the interface that allows user interaction. Usability considers how easily users can accomplish tasks. The document provides examples of UX disciplines and emphasizes the importance of user research to understand needs. It also outlines techniques for testing like A/B testing, card sorting, and usability testing. Best practices for testing forms are presented, focusing on labels, fields, grouping, actions, and scrolling.
The document summarizes different low-cost methods for conducting user research on web products with limited resources. It discusses using heatmapping and analytics tools to evaluate existing use, as well as virtual usability testing, guerrilla testing, and microfeedback forms to gather user experience feedback during the design process. Specific tools mentioned include CrazyEgg, Google Analytics, Usabilla, and building your own microfeedback forms. Examples are provided from a case study of redesigning a university library website.
Slides from a workshop at The Net Value, Cagliari 03/2016
Your product is perfect and users are stupid. You are developing for a long time, following the perfect idea, your assumptions, you are not wrong… or not?
In this workshop you will understand the foundation of user experience. What UX is, why it is important and how you can start adopting it in your processes.
This document provides guidance for conducting usability testing and quality assurance. It discusses identifying websites to test and key tasks for each site. It encourages identifying sites that may be new to classmates and, ideally, sites that those conducting the test work on. For each chosen site, it recommends identifying 3-5 key tasks that a user should be able to accomplish on the site.
The document discusses the importance of usability testing in website and application design. It defines usability as how easy user interfaces are to use. The main points of usability testing are to inform design decisions rather than prove one design is better than another. Usability testing evaluates how learnable, efficient, memorable, error-proof, and satisfying a design is to use based on feedback from real users. The document dispels common myths that usability testing is too costly, will delay projects, or limits creativity. It argues that usability testing can actually improve designs and be completed quickly and cost-effectively.
Improving your site's usability - what users really wantleisa reichelt
Improving your site's usability by understanding what users want. The document discusses conducting user research through methods like usability testing, focus groups, and field research to understand user needs and design websites accordingly. User-centered design is highlighted as an approach that involves both strategic and tactical elements to understand why people use a site and how well they can use it. User research helps uncover real user requirements and avoid making assumptions about what users want.
This document provides an overview and definitions of usability testing. It discusses that usability testing involves having users complete tasks while thinking out loud to uncover usability issues. It recommends testing with 5 users to find 80% of issues. The document outlines best practices for planning a test, including developing test plans and tasks, finding and screening participants, conducting sessions, analyzing data, and reporting findings. It emphasizes that usability testing should involve observing how users complete realistic tasks rather than just asking for feedback.
The usability testing document discusses various methods for conducting usability testing, including remote screen sharing, recording user interactions, and analyzing task completion times, errors, and user feedback. It describes card sorting, task elicitation, and enhanced analytics as alternatives if an evaluator prefers machines over people. The document also provides recommendations for open-ended questioning, eye tracking, and using prototypes during testing. Overall, the summary emphasizes different approaches to usability testing and gaining user feedback.
"Open" includes users - Leverage their inputRandy Earl
This document discusses various user research methods that can be used to improve open source software and ensure diversity. It begins by explaining the importance of intentionally including a diverse user base to drive innovation. It then provides an overview of common user research methods such as interviews, usability testing, card sorting, and analytics reviews. Specific examples are given around label testing and task-based navigation that resulted in improved user experiences and outcomes. The overall message is that proactively involving and understanding users is critical for the success of any software, including open source projects.
This document discusses user experience (UX) design and provides examples of how focusing on UX can improve products and businesses. It outlines the UX design process, including defining strategy, conducting user research, ideating solutions, designing prototypes, testing with users, and tracking metrics after launch. Key aspects of UX highlighted are creating intuitive, usable interfaces centered around user needs through iterative design and validation.
Usability Tips And Tricks For Beginners Experience Dynamics Web SeminarExperience Dynamics
Usability is commonly thought of as the art and science of making things easy to use.
What is behind the science of usability? How do we know when something is easy, easy to learn and satisfying?
Why is usability so important for any product, website, software or web application (including Rich Internet Applications)?
Usability refers to how easy user interfaces are to use. It is measured based on six factors: effectiveness, learnability, efficiency, memorability, error prevention, and satisfaction. Usability testing should start early in the design process and continue through iterations to refine the design. Implementing usability principles leads to products that are intuitive and enjoyable to use, improving user experience and business outcomes.
This document provides an overview of usability testing and highlights from its history. It discusses why usability testing is important and how even simple, qualitative testing can identify major usability issues. Examples of usability metrics like effectiveness, efficiency and satisfaction are given. The document then describes how to plan and conduct DIY usability tests with only a few participants through defining goals, tasks, recruiting testing and debriefing. It also discusses testing accessibility, mobile usability, and using tools like prototyping and A/B testing.
Roberts provides a portfolio of UX design work including projects for Meetup, Pique, and Fordham Law School. She has experience in interior design, improv theatre, and the Peace Corps which inform her work. She is passionate about UX design and wants to join a team where she can grow and be inspired.
A Content Management System (CMS) allows publishing, editing, and modifying content from a central page. CMS platforms like WordPress, Drupal, and Joomla provide easy updates and collaboration for clients. While non-CMS sites are initially cheaper, CMS sites are less expensive long-term and allow clients full control over updates. Popular CMS types include blog-based systems like WordPress and e-commerce systems like Magento and OpenCart. Browser developer tools like Firebug, Chrome, and Safari allow inspecting website code.
The document provides information and guidance for web designers on setting rates and managing projects. It discusses determining income goals and calculating hourly rates. It also covers topics like using time tracking software, creating proposals, managing project scope, and using online project management tools. Maintaining professional operations is important, such as opening new jobs, meeting deadlines, and keeping customers satisfied.
This document provides guidance to designers on developing their personal brand, including designing a logo, resume, portfolio, business cards, and social media presence. It offers tips on choosing fonts, colors, and layouts that effectively represent one's work. Workshop activities guide participants in designing these branding elements and getting feedback from others. The goal is to help designers create a consistent, professional brand that impress potential employers.
Usability testing is a technique used to evaluate a website or application by testing it with real users. It involves having users complete typical tasks while observing them to identify any usability issues or areas for improvement. Key aspects of usability testing include recruiting 5-8 representative users, having them complete tasks while thinking aloud, and analyzing both quantitative metrics like task completion times as well as qualitative feedback to identify themes and inform design recommendations.
The document discusses usability and its importance for websites. It defines usability as allowing users to accomplish tasks intuitively without frustration. Usability is about the user experience. It is important because users will go to competitors' websites if theirs does not help them achieve their goals easily. The document provides tips on how to improve a website's usability, such as using clear navigation, concise writing, and intuitive labeling of elements. It also suggests testing the site from the user perspective.
The document discusses the principles of universal design. It defines universal design as the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. It then lists and briefly explains the seven principles of universal design - equitable use, flexibility in use, simple and intuitive use, perceptible information, tolerance for error, low physical effort, and size and space for approach and use. Examples are provided to illustrate each principle.
This document summarizes key points from a university course on website usability. The course objectives are to provide a foundation for building usable websites by covering information architecture, navigation, design, writing and usability testing. It discusses concepts like human factors, affordances, mental models and how users interact with websites. It emphasizes keeping websites simple and easy to use so users don't have to think too much when trying to complete tasks.
The document provides information about information architecture (IA). It discusses how IA involves organizing a website's structure and content to help users find relevant information. It explains that effective IA analyzes content, organizes pages logically, uses clear labels and navigation, and considers how users think and what they need to find. The document also provides examples of different organizational structures, labeling approaches, and navigation techniques that are important aspects of information architecture.
This document provides a checklist for evaluating the usability of a website. It covers areas like visual hierarchy, consistency of style/color, readability of text, ease of navigation, load times, and how well the site clearly defines the company. Users are instructed to rate each item from 1 to 5 and add up their scores to determine where their site stands in terms of usability, with higher scores indicating better usability. The document encourages contacting the company for help improving low-scoring sites.
For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2024/06/building-and-scaling-ai-applications-with-the-nx-ai-manager-a-presentation-from-network-optix/
Robin van Emden, Senior Director of Data Science at Network Optix, presents the “Building and Scaling AI Applications with the Nx AI Manager,” tutorial at the May 2024 Embedded Vision Summit.
In this presentation, van Emden covers the basics of scaling edge AI solutions using the Nx tool kit. He emphasizes the process of developing AI models and deploying them globally. He also showcases the conversion of AI models and the creation of effective edge AI pipelines, with a focus on pre-processing, model conversion, selecting the appropriate inference engine for the target hardware and post-processing.
van Emden shows how Nx can simplify the developer’s life and facilitate a rapid transition from concept to production-ready applications.He provides valuable insights into developing scalable and efficient edge AI solutions, with a strong focus on practical implementation.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
Infrastructure Challenges in Scaling RAG with Custom AI modelsZilliz
Building Retrieval-Augmented Generation (RAG) systems with open-source and custom AI models is a complex task. This talk explores the challenges in productionizing RAG systems, including retrieval performance, response synthesis, and evaluation. We’ll discuss how to leverage open-source models like text embeddings, language models, and custom fine-tuned models to enhance RAG performance. Additionally, we’ll cover how BentoML can help orchestrate and scale these AI components efficiently, ensuring seamless deployment and management of RAG systems in the cloud.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
GraphRAG for Life Science to increase LLM accuracyTomaz Bratanic
GraphRAG for life science domain, where you retriever information from biomedical knowledge graphs using LLMs to increase the accuracy and performance of generated answers
Best 20 SEO Techniques To Improve Website Visibility In SERPPixlogix Infotech
Boost your website's visibility with proven SEO techniques! Our latest blog dives into essential strategies to enhance your online presence, increase traffic, and rank higher on search engines. From keyword optimization to quality content creation, learn how to make your site stand out in the crowded digital landscape. Discover actionable tips and expert insights to elevate your SEO game.
UiPath Test Automation using UiPath Test Suite series, part 5DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 5. In this session, we will cover CI/CD with devops.
Topics covered:
CI/CD with in UiPath
End-to-end overview of CI/CD pipeline with Azure devops
Speaker:
Lyndsey Byblow, Test Suite Sales Engineer @ UiPath, Inc.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUpanagenda
Webinar Recording: https://www.panagenda.com/webinars/hcl-notes-und-domino-lizenzkostenreduzierung-in-der-welt-von-dlau/
DLAU und die Lizenzen nach dem CCB- und CCX-Modell sind für viele in der HCL-Community seit letztem Jahr ein heißes Thema. Als Notes- oder Domino-Kunde haben Sie vielleicht mit unerwartet hohen Benutzerzahlen und Lizenzgebühren zu kämpfen. Sie fragen sich vielleicht, wie diese neue Art der Lizenzierung funktioniert und welchen Nutzen sie Ihnen bringt. Vor allem wollen Sie sicherlich Ihr Budget einhalten und Kosten sparen, wo immer möglich. Das verstehen wir und wir möchten Ihnen dabei helfen!
Wir erklären Ihnen, wie Sie häufige Konfigurationsprobleme lösen können, die dazu führen können, dass mehr Benutzer gezählt werden als nötig, und wie Sie überflüssige oder ungenutzte Konten identifizieren und entfernen können, um Geld zu sparen. Es gibt auch einige Ansätze, die zu unnötigen Ausgaben führen können, z. B. wenn ein Personendokument anstelle eines Mail-Ins für geteilte Mailboxen verwendet wird. Wir zeigen Ihnen solche Fälle und deren Lösungen. Und natürlich erklären wir Ihnen das neue Lizenzmodell.
Nehmen Sie an diesem Webinar teil, bei dem HCL-Ambassador Marc Thomas und Gastredner Franz Walder Ihnen diese neue Welt näherbringen. Es vermittelt Ihnen die Tools und das Know-how, um den Überblick zu bewahren. Sie werden in der Lage sein, Ihre Kosten durch eine optimierte Domino-Konfiguration zu reduzieren und auch in Zukunft gering zu halten.
Diese Themen werden behandelt
- Reduzierung der Lizenzkosten durch Auffinden und Beheben von Fehlkonfigurationen und überflüssigen Konten
- Wie funktionieren CCB- und CCX-Lizenzen wirklich?
- Verstehen des DLAU-Tools und wie man es am besten nutzt
- Tipps für häufige Problembereiche, wie z. B. Team-Postfächer, Funktions-/Testbenutzer usw.
- Praxisbeispiele und Best Practices zum sofortigen Umsetzen
Full-RAG: A modern architecture for hyper-personalizationZilliz
Mike Del Balso, CEO & Co-Founder at Tecton, presents "Full RAG," a novel approach to AI recommendation systems, aiming to push beyond the limitations of traditional models through a deep integration of contextual insights and real-time data, leveraging the Retrieval-Augmented Generation architecture. This talk will outline Full RAG's potential to significantly enhance personalization, address engineering challenges such as data management and model training, and introduce data enrichment with reranking as a key solution. Attendees will gain crucial insights into the importance of hyperpersonalization in AI, the capabilities of Full RAG for advanced personalization, and strategies for managing complex data integrations for deploying cutting-edge AI solutions.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
3. WELL, WHAT IS USABILITY?
“Usability really just means making sure that something
works well: that a person of average (or even below average)
ability and experience can use the thing - whether it's a Web
site, a fighter jet, or a revolving door - for its intended
purpose without getting hopelessly frustrated.”
(Steve Krug)
4. USABILITY TESTING
Testing is a technique to ensure that the intended users can
perform the intended tasks efficiently, effectively and
satisfactorily. Without frustration!
5. WHAT TOOLS ARE AVAILABLE?
Surveys
Interviews
Eyetracking studies
Usability testing
Online testing tools
6. SURVEYS
Allow users to review the site.
Distribute surveys.
Ask them to answer questions
Survey
7. INTERVIEWS
Allow users to review the site.
Make user comfortable.
Ask users questions.
See handout.
Interview
9. EYETRACKING AND THE EYE
Eyetracking is following the trail of where a person is looking.
Equipment can be built into the computer.
Eyetracking software keeps track of what’s on screen while
user is looking at it.
How does it work?
10. FIXATION
When the eye is resting on something.
Last between one-tenth and one-half.
Red spots are fixations.
11. SACCADES
The eye’s rapid movements from one fixation to the next.
Last between one-hundredth and one-tenth of a second.
Thin red line connecting the dots are saccades between
fixations.
Eyetracking Study
12. HEAT MAPS
Visualization technique for eyetracking studies.
A color-coded screenshot that shows the user’s fixations.
Red: where users looked most.
Yellow: indicate fewer fixations.
Blue: indicate least view areas.
Gray: no fixations. Facebook Heatmap
20. USABILITY TESTING
Series of tasks for participants to perform on an actual
website or prototype.
Tasks are formulated from user and business goals.
Measures the success of failure of a design.
What you need?
Pen and clipboard, computer with Internet connection,
perhaps a tape recorder.
22. #1 INTRODUCTION (5-10 MINS)
Make participant feel comfortable.
Let them know they can have a break any time.
If video taping, get permission.
Ask questions about them – include demographics,
occupation, education level, Internet experience.
Explain equipment if necessary.
Assure them that there is no right or wrong.
23. #2 TASKS (10 - 15 MINS )
Be sure to read the task aloud.
Encourage participant to think aloud.
Have a written version that you leave in front of the user.
DO NOT HELP THE USER THROUGH THE TASK.
No small talk!
24. TECHNOLOGY
Morae®: A recorder that captures onscreen activity of the
user’s computer and a camera video of the user.
Creates a synchronized index of events occurring behind the
scenes in applications and in the operating system.
Morae Website
25. COMMON ERRORS
Strategic Errors - premature testing, not enough time or
will to make changes.
Inadequate Planning - do a pilot test to uncover problems
with plan and materials.
Read script aloud.
Allow enough time between test sessions (minimum 30
minutes)
26. COMMON ERRORS
Poor Task Design - test core functionality and areas
identified as problematic.
If scenarios were used, convert into tasks to ensure key
interactions are studied.
Accidental Revelation - revealing too much. Watch your
language.
Unprofessional Demeanor - need to be professionally
detached and neutral. Don’t finish user’s sentence!
27. TEST PARTICIPANTS
Get representative users - Craig’s list, LinkedIn,employment
agencies, market research agencies.
Use questionnaires to screen.
Offer incentives.
Send reminders.
29. TEST PARTICIPANTS
Schedule 5 - 8 users.
Only need 5 - account for no shows, botched tests.
Test up to 3 groups of 5 - 1 test after iterations made.
35. QUANTITATIVE DATA
Any information that can be measured:
Ease of use
Satisfaction
Verbal descriptions of people’s experiences
Examples: The time it takes to complete a task, or the
completion rate of a task.
36. QUALITATIVE DATA
Information that requires interpretation
Identifies trends or categories of user’s behavior
Example: How well users can complete a task
Where they are encountering problems
Level of frustration
45. AFFINITY DIAGRAMS
Organizes items into common themes.
Helpful when you have a large amount of data.
You have many facts or ideas in apparent chaos.
When issues seem too large and complex.
When group consensus is needed.
46. AFFINITY DIAGRAMS
1. Record each idea on sticky note and layout on wall
2. Look for groups
3. Repeat till all notes are grouped
4. If a note seems to belong in two groups, make a second note
5. Discuss patterns and reason for groupings
6. Find headers
47.
48.
49. SPREADSHEETS
Use to track stories, needs, pain points, successes
Provides Quantitative layer over Qualitative information
More difficult to collaborate than affinity diagrams
Example
50. WORKSHOP # 1 - USABILITY TEST
Please break into twos. Person A tests Person B
Follow format:
Orientation
Tasks - read aloud to participant
- careful not to “help”
- be sure to ask about expectations
- let mistakes happen
Debriefing
51. WORKSHOP # 1 - USABILITY TEST
Anything surprise you?
Any new insight?
Anything go wrong?
Was the site used in a way that you did not expect?
Did you discover any usability problems?
52. WORKSHOP # 1a- USABILITY TEST
Please break into twos. Person B tests Person A
Follow format:
Orientation
Tasks - read aloud to participant
- careful not to “help”
- be sure to ask about expectations
- let mistakes happen
Debriefing
53. WORKSHOP # 1a - USABILITY TEST
Anything surprise you?
Any new insight?
Anything go wrong?
Was the site used in a way that you did not expect?
Did you discover any usability problems?
55. USER EXPERIENCE
"User experience isn't a layer or component of a product or
service. It's really about the design of the whole systems and
their interconnections."
- Andre Hinton, Senior IA at Vanguard
56. WHY TEST?
If a user can’t find what a product, they won’t buy.
If they can’t find what they are looking for, they will look
elsewhere.
The holder of the mouse rules!
58. NAVIGATION
“Navigation isn’t just a feature of a website, it is the web site,
in the same way that the building, the shelves, and the
cash register are Sears. Without it, there’s no there there.”
-Steve Krug
59. WAYFINDING
Coined by Kevin Lynch in The Image of the City, 1960.
Describes the elements that allow us to navigate successfully
in cities and towns.
60. 4 CORE COMPONENTS
1. Orientation: Where am I now?
2. Route decisions: Can I find the way to where I want to go?
3. Mental mapping: Are my experiences consistent and
understandable enough to know where I’ve been and to
predict where I should go next?
4. Closure: Can I recognize that I have arrived in the right
place?
61. ELEMENTS OF MENTAL MAPS
1. Paths: streets, transit lines, canals, railroads - channels
that people regularly move.
2. Edges: physical barriers; walls, fences, rivers, shore -
boundaries that create linear breaks in continuity/separate
and relate two distinct regions.
3. Districts: Major sections of a city that have a common
identifying character: Chinatown, Wall Street, Greenwich
Village.
62. ELEMENTS OF MENTAL MAPS
4. Nodes: Intersections, enclosed squares, street corners,
subway stations - all serve as points of reference, transition
and destination.
5. Landmarks: Towering buildings, golden domes,
mountains, signs, storefronts, trees - physical objects that
serve as spatial reference points.
63. ON THE WEB
No sense of scale or movement in space.
No compass: no direction.
You are here: navigation interface.
Paths: lead the way: site navigation, breadcrumbs.
67. NODES
The local coffee shop or Times Square?
Too much choice causes stress, slows decisions, makes us
less satisfied and more likely to walk away.
68.
69. LANDMARKS “YOU ARE HERE”
Search function cuts across all the normal wayfinding
boundaries.
Orientation cues are particularly important since users often
arrive at a page without having followed a deliberate and
repeatable path.
71. SUMMARY
1. Paths: create consistent, well-marked navigation paths.
2. Regions: create a unique but related identity for each
site region.
3. Nodes: don’t confuse the user with too many choices.
4. Landmarks: use consistent landmarks in site navigation
and graphics to keep the user oriented.
Web Style Guide, 3rd Edition
73. ELEGANCE & SIMPLICITY
Use economy of expression.
Most powerful designs are result of a process of
simplification and refinement.
74. MINIMALISM
“A designer knows he has achieved perfection not when
there is nothing left to add, but when there is nothing left to
take away.”
- Anoine de Saint Exupéry
-
75.
76. ADVANTAGES
Approachability: easy to tell at a glance what it is and designs
invite further exploration.
Recognizability: recognized easily, easily assimilated,
understood and…REMEMBERED.
Immediacy: have greater impact because they can be
immediately recognized and understood with minimal effort.
Usability: simplicity enhances usability.
77. PRINCIPLES
Unity
Refinement
Fitness
All the elements must be unified to produce a coherent
whole. The parts and whole must be refined to focus user
attention and the fitness of the solution to the
communication problem must be ensured at every level.
78. HOW
Reduction
Regularization
Leverage
Reduce the design to its essence, regularize the elements of
the design, then combine them for maximum leverage.
80. SCALE, CONTRAST, PROPORTION
The subtle interrelationship of scale, contrast and
proportion can be seen in all harmonious designs.
81. SCALE
Describes the relative size of a design element in relation to
the other design elements and the composition as a whole.
82.
83.
84. CONTRAST
Results from the differences that can be seen between the
design elements.
Provides visual distinctions in: shape, size, color, texture,
position, orientation, and movement.
90. ORGANIZATION & STRUCTURE
Provide the user with visual pathways needed to experience
a site in a systematic way.
Must be introduced by establishing relationships among the
design elements.
93. GROUPING
Start by grouping display elements into higher order units.
(Note: words in a book are grouped into columns,
paragraphs, sections etc).
Higher-level structures orient the user.
Binds functional units tightly together.
Use spacing and alignment for effectiveness.
94.
95. HIERARCHY
Eye looks for visual hierarchies for orientation.
Most important elements must be large enough to draw the
viewer closer.
Specifics follow.
96.
97. RELATIONSHIPS
Grouping and hierarchy are reinforced when visual
elements are related.
Position, size and value provide visual cues.
Alignment helps form visual relations.
98.
99. BALANCE
Ensures that the elements remain stable in their position on
the page.
A composition is balanced when the visual weight of the
elements on either side of the piece are approximately equal.
135. Link to home page Primary location for search, shopping carts
LOGO
Calender | A-Z Index Search This Site GO
Navigation and search
The tagline would go here... Identity and titles
Header
Navigation links
Navigation | Navigation | Navigation | Navigation Tab navigation
Selected Tab Unselected Tab Unselected Tab
Navigation Home page > Section > Page Breadcrumb trail Alternate right location
Navigation for scan column
Navigation navigation and search
Local Navigation
Navigation
Navigation Common location for
Navigation banner ads
Navigation
Navigation
Search,
banner ads, Left scan column Right scan column
Main content column
contact (optional) (optional)
information
Contact information,
Footer Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555
copyrights, dates
136. WEB STANDARDS
“The experienced web designer, like the talented newspaper
art director, accepts that many projects she works on will
have headers and columns and footers. Her job is not to
whine about emerging commonalities but to use them to
create pages that are distinctive, natural, brand-appropriate,
subtly memorable and quietly but unmistakably engaging.”
- Jeffery Zeldman
-
137. ABOVE THE FOLD
Above the fold - a graphic design concept that refers to the
location of an important news story or a visually appealing
photograph on the upper half of the front page of a
newspaper.
In web design, top 600 to 700 pixels (on 19” - 22” monitor)
Just a guideline.
138.
139.
140. BREAKING THE RULES
More sites now will put important content beneath the fold.
People will scroll if the content is interesting.
37signals Acumen Fund
Zipcare
141. PURPOSE OF GRAPHIC DESIGN
Unlike a print, web users interact with information.
GUI (graphic user interface) must convey function and
meaning.
Graphics are integral to the user’s experience.
142. PURPOSE OF GRAPHIC DESIGN
Create visual hierarchy so you can see what’s important.
Define functional regions of the page.
Group page elements that are related, so you can see
structure in the content.
143. CONSISTENT LAYOUT
Header - mini versions of the homepage.
Footer - about house keeping and and legal matters.
Global Navigation
Local Navigation
Content, Features, Products
Banner Ads
144. PAGES SHOULD INCLUDE
Informative title
Identity
Copyright statement
Link back to home
Navigational links
Heading or title to clarify content
Link to contact information
Alternate (alt) text identifying graphics on the page
145. WHAT GOES INTO A HEADER?
Site identity
Major navigation links/utility navigation
Search box (not always)
Link back to home
146. POSSIBLE HEADER COMPONENTS
Individual designs rarely use them all.
Advertising Search This Site GO Cart
Navigation | Navigation | Navigation | Navigation
LOGO Site titles, section identity, or advertising
Selected Tab Unselected Tab Unselected Tab
149. WHAT GOES INTO A FOOTER?
Contact information.
Copyright statement.
Page author.
Links to related sites or to larger enterprise.
Utility links can go here.
Redundant navigation for long pages.
152. CONTENT IS KING
“Ultimately, users visit your website for its content.
Everything else is just the backdrop. The design is there to
allow people access to the content.”
- Jakob Nielsen
-
153. PAPER VERSUS MONITOR
Because screen resolution is low (72 to 110 dpi), it places a
strain on the human eye.
Because we read on a screen, we are forced to view from a
more or less fixed position - with print you can read
anywhere in any position.
Can lay papers out on the floor. (Can’t do a search though.)
154. PAPER VERSUS MONITOR
Screen glare is not an obstacle when reading on paper.
Monitor Flick: looks like a solid image, but the screen is
refreshing so fast that you are fooled into seeing a solid
image, but the brain is alway correcting for the flicker.
Reading is 25% slower on a screen. (Jacob Nielsen)
155. READING ON THE WEB
- Scrolling is clumsy - people don’t like it and they lose their place.
- Readers scan on-screen, then print content for reading.
- Web reading is not stationary - text jumps from link to link and
page to page.
- Many web pages end up as fragments of information taken from
larger context.
156. 3 GUIDELINES
1. Be succinct - write no more than 50% of the test that you
would have used in print.
2. Write for scanability - use short paragraphs, subheadings,
bulleted lists.
3. Use hypertext to split up long information into multiple pages.
157. SCANABILITY
- Studies show that almost 80% of users initially scan a
webpage.
- Users pick out key words, sentences and paragraphs of
interest - They skip over the text they are not concerned with.
- Write articles with two or three levels of headlines for easy
scanability.
- Use general page headings plus subheads and sub-subheads
if needed.
158. SCANABILITY
- Use meaningful headlines - Tell the user what the page or
section is about.
- Use bulleted lists and similar design elements to break text
blocks.
- Use highlighting and emphasis to catch the user's eye.
- Be sure to distinguish from link colors so as to avoid confusion.
159. USE PLAIN LANGUAGE
- Start each page with the conclusion - most important material
should come up front.
- Users should be able to tell in a glance what the page is about.
- Users often only read the first line of a paragraph - use topic
sentences, one idea per paragraph.
- Use simple sentence structure - avoid convoluted writing and
complex words.
- Use caution with metaphors and humor - readers may take you
literally.
160. CHUNKING
- Use hyperlinks to make text short.
- Keep links visible, ideally above the fold.
- Split the information into “chunks” that focus on a certain topic.
- Move long, detailed info to secondary pages.
- Avoid using links to break long articles into separate pages - is
disruptive and makes printing difficult.
161. HEADLINES
- Online headlines are different than printed headlines.
- Online headlines are often displayed out of context: as part of
an article, in a search list, in a bookmark list.
- Headline must stand on it’s own even when the rest of content
is unavailable.
- Online headlines and their content are often hard to see in a
single glance on the window so it is difficult for the user to
learn enough just from the surrounding data.
162. LEGIBILITY
Use colors that have a high contrast between the text and the
background.
Use plain color-backgrounds or subtle patterns.
Use fonts big enough that people can read.
Make the text stand still – moving blinking or zooming text is
hard to read.
Keep sentences to 7 - 10 words as that is what the eye can
comfortably track.
164. LEGIBILITY
AVOID THE USE OF ALL CAPS FOR TEXT BECAUSE RESEARCH HAS SHOWN THAT IT IS
10 PERCENT SLOWER TO READ THAN TEXT IN MIXED CASES, BECAUSE IT IS HARDER
FOR THE EYE TO RECOGNIZE THE SHAPE OF WORDS AND CHARACTERS IN THE MORE
UNIFORM AND BLOCKY APPEARANCE. DON'T DO IT.
Legibility depends on the tops of all the letters.
Legibility depends on the tops of all the letters.
2. Use plain color-backgrounds or subtle patterns.
3. Use fonts big enough that people can read.
4. Make the text stand still – moving blinking or zooming text is hard to read.
165. REMEMBER
Explain what the article is about in terms that relate to the user.
Write in plain language.
Avoid teasers that try to entice people to click.
Try to make the first word an important, information-carrying one.
166. WORKSHOP # 3 HEADLINES
Stay in your groups.
Remove every word you can from the passages below and create
a catching headline.
1. Government officials involved in the Olympics call it a
fiasco, that is, the extent of chaos that has thrown security
plans into disarray upon learning that of the shortfall of
civilian guards.
2. If “Ghosts in the Machine” an ambitious exhibition at the
Met were itself a machine, it would have lots of moving
parts but not all would be performing with equal
efficiency.
3. Apple announced that its’ bestselling MacBook laptop
just got its newest makeover. It’s a thing of beauty, clad in
aluminum like its more expensive Pro siblings. A
168. TYPOGRAPHY
Typography is the process of arranging letters, many
terms are left over from the days of letterpress
On computers we use fonts, whether for digital printing or
on the web.
169. HISTORY OF WEB TYPOGRAPHY
At first browsers had no way of embedding fonts.
1995: Netscape introduces <font> tag
1998: CSS2 allows for more type configuration
2005: CSS3 introduces @font-face, allowing fonts to be
hosted online
170. WEB-SAFE FONTS
Come preinstalled on most computers.
Arial, Comic Sans MS, Courier,Georgia, Impact, Tahoma
Times New Roman, Verdana
171. @FONT-FACE
Lets the browser load a font from a remote server, meaning
that pages can display text in the specified font even if the
user does not have it installed on their computer.
Allows for greater design customization without sacrificing
accessibility or SEO.
174. SERIF VS SANS SERIF
Serif
Sans Serif
Slab Serif
Display
175. HEADERS VS COPY
You can use decorative fonts for headers...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales,
sapien ut porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu
orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla at
felis eget neque aliquam convallis.
176. X-HEIGHT
Lorem ipsum Lorem ipsum
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis. at felis eget neque aliquam convallis.
177. OUR FAVORITES
Our favorite web fonts available for free from Google Fonts.
Open Sans Open Sans Open Sans Open Sans Open Sans
Lato Lato Lato Lato
Lora Lora Lora Lora
Vollkorn Vollkorn Vollkorn Vollkorn
179. INCREASE LEADING
Line height should be at least 120% of font size.
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id
porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla eleifend est nulla eu orci. Mauris lectus eros,
at felis eget neque aliquam convallis. rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis.
184. MAINTAIN LEGIBILITY
Light colors are hard to read, even on white. Beware of #666.
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis. at felis eget neque aliquam convallis.
Test your legibility with AccessColor.
189. COLUMN WIDTH
The eye can only comfortable track 7-10 words per line,
which is about 40 to 80 characters.
Multiply your text size by 30 to determine maximum
column width.
10px type x 30 = 300px column width
194. IMPLEMENT HIERARCHY
Use multiple typefaces to differentiate between elements on
the page.
Mix between categories (serif, sans serif, slab serif, display)
Don’t go too crazy! Don’t use more than 2 or 3 fonts.
200. WORKSHOP # 4 CREATE SITE
Please go into the group you worked with when creating
personas.
CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND
SCENARIOS.
What content would the user you defined find on the site?
Establish content
Establish information architecture
Create site map
Create navigation
Create wireframes or other prototype
Do a prototype test
Make improvements
201. WORKSHOP #4 SCENARIOS
GROUP #1:
Site is to provide info for people starting own business; some of them
have experience in he business world; others this is their first
exposure to issues running a business.
GROUP #2:
Site is to provide info for people looking to place parents in assisted
living.
GROUP #3:
Site is to provide info for people looking to compare car insurance.
Editor's Notes
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
The above example is from a website's "About Us" pages. The heatmap clearly shows users' tendency to read in an "F" pattern, and their focus on information that's presented in bulleted lists. In this case, there's also a small amount of attention to the "see also" area, but no viewing of the promotions in the rightmost column. \n
\n
\n
Web users tend to ignore everything that looks like advertisement and, what is interesting, they&#x2019;re pretty good at it. Although advertisement is noticed, it is almost always ignored. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.\nJakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they&#x2019;re looking for a snippet of information on a page or are engrossed in content, they won&#x2019;t be distracted by the ads on the side.The implication of this is not only that users will avoid ads but that they&#x2019;ll avoid anything that looks like an ad, even if it&#x2019;s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.\n\n
On Web pages, we tend to focus on people&#x2019;s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people&#x2019;s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.\n\n
Here&#x2019;s an eye-tracking study that demonstrates this. We&#x2019;re instinctively drawn to faces, but if that face is looking somewhere other than at us, we&#x2019;ll also look in that direction. Take advantage of this phenomenon by drawing your users&#x2019; attention to the most important parts of your page or ad. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Examples\nGood IA: Supermarket puts chocolate together with other snack foods\nBad IA: nAll grocery items by manufacturer \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
you can see parallels. similarities but travel on the web is magical. you just appear at the next point in your journey from page to page. no experience of the landscape unfolding before you as a series of landmarks.\n
\n
Consistency is the golden rul of interface design and way finding, but paradox is if everything looks the dame, THERE ARE NO EDGES. in a corporate site if y ou move from one region to another, from marketing to HR, you ought to notice that you just passed an important regional bouncary.\n
\n
The Paradox of Choice, Barry Schwartz give users choice is the matra but too many will overwhelm them.\n
As pages get more complex you risk overwhelming the user with the &#x201C;times Square effect&#x201D; of too many competing visual stimuli.\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n