The document provides guidance on various aspects of user experience design such as getting started on a project, conducting user research, designing the user interface, developing content strategy, and front-end development best practices. It offers tips on building relationships with users, using paper prototypes for testing, prioritizing top tasks in design, and other strategies for creating a positive user experience. The 50 topics covered provide a comprehensive overview of UX design processes and considerations.
UX IS ABOUT SATISFACTION.
UX IS DESIGNING FOR USER TO COME BACK THE SITE.
UX FOCUSES ON THE STRUCTURE & LAYOUT OF CONTENT, NAVIGATION AND HOW USERS INTERACT WITH THEM.
UX IS ABOUT SATISFACTION.
UX IS DESIGNING FOR USER TO COME BACK THE SITE.
UX FOCUSES ON THE STRUCTURE & LAYOUT OF CONTENT, NAVIGATION AND HOW USERS INTERACT WITH THEM.
I created this presentation as a brief overview on Usability engineering a.k.a user experience in the context of Software Development. For more details, you can log on to www.texavi.com
This presentation is targeted to developers trying to learn enough design skills to fill in gaps when a ux designer is not available to work on a project. A secondary goal is to give developers insight into the design process.
User Experience Design Fundamentals - Part 1: Users & GoalsLaura B
#1 in a 3-part series on UX Fundamentals: Users & Goals
* Value & Process
* Goal-directed design
* Users and their goals
* Learn how to articulate the goals of your product’s users
* Learn how to use user goals to assess a website or product
What UX is, how it works and why it matters. Train your teams to recognize and strengthen the links between customer experience indicators and your overall business performance. Learn how to work with your customers to design successful products, services and experiences.
Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then characterize effective prototyping and explain why those characteristics are so important.
Everett will review several commonly available prototyping tools (including SketchFlow), and evaluate their pros and cons. He will conclude by working through some examples so that you can see effective prototyping in practice.
If you or your team is prototyping now or considering prototyping in the future, this talk is for you!
Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. As a result, many prototyping efforts aren’t productive and fail to achieve their goals.
In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then give the eight rules for effective prototyping and show why those rules are so important.
Everett will review several commonly available prototyping tools (including SketchFlow), give nine criteria for evaluating prototyping tools, and evaluate the tools based on the criteria. He will conclude by showing some examples effective and ineffective prototyping in practice.
If you or your team is prototyping now or considering prototyping in the future, this talk is for you!
Prototyping is essential to designing memorable mobile user experiences, but can often be overlooked at the beginning of building a product. Learn the types of prototypes, tools, and best practices for mobile product design (including overview of mobile flow and UI best practices, patterns, and frameworks).
There are several ways that current development processes can miserably fail users and the business when trying to launch your project on multiple platforms. Massive changes, blame, or simply not understanding your missed opportunities, are the usual results.
The answer is not any of these, and certainly not to try to impose a new process. Instead, encompass all the existing processes to create a new philosophy of implementation. Avoid pitfalls and gaps, and play to the strengths of your team to operationalize a functional design and development processes.
Steven will talk about methods he's devised and used with business, analysts, and developers that make everyone happy and help assure projects actually launch.
Presented at D2WC in Kansas City on 17 March 2012
I created this presentation as a brief overview on Usability engineering a.k.a user experience in the context of Software Development. For more details, you can log on to www.texavi.com
This presentation is targeted to developers trying to learn enough design skills to fill in gaps when a ux designer is not available to work on a project. A secondary goal is to give developers insight into the design process.
User Experience Design Fundamentals - Part 1: Users & GoalsLaura B
#1 in a 3-part series on UX Fundamentals: Users & Goals
* Value & Process
* Goal-directed design
* Users and their goals
* Learn how to articulate the goals of your product’s users
* Learn how to use user goals to assess a website or product
What UX is, how it works and why it matters. Train your teams to recognize and strengthen the links between customer experience indicators and your overall business performance. Learn how to work with your customers to design successful products, services and experiences.
Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then characterize effective prototyping and explain why those characteristics are so important.
Everett will review several commonly available prototyping tools (including SketchFlow), and evaluate their pros and cons. He will conclude by working through some examples so that you can see effective prototyping in practice.
If you or your team is prototyping now or considering prototyping in the future, this talk is for you!
Software prototyping is an important UX design skill that many people “just do” but effective prototyping requires crucial knowledge and practices that aren’t obvious. As a result, many prototyping efforts aren’t productive and fail to achieve their goals.
In this talk, Everett will explain prototyping and its goals, compare prototyping to sketching, and explore the different types of prototyping. He will then give the eight rules for effective prototyping and show why those rules are so important.
Everett will review several commonly available prototyping tools (including SketchFlow), give nine criteria for evaluating prototyping tools, and evaluate the tools based on the criteria. He will conclude by showing some examples effective and ineffective prototyping in practice.
If you or your team is prototyping now or considering prototyping in the future, this talk is for you!
Prototyping is essential to designing memorable mobile user experiences, but can often be overlooked at the beginning of building a product. Learn the types of prototypes, tools, and best practices for mobile product design (including overview of mobile flow and UI best practices, patterns, and frameworks).
There are several ways that current development processes can miserably fail users and the business when trying to launch your project on multiple platforms. Massive changes, blame, or simply not understanding your missed opportunities, are the usual results.
The answer is not any of these, and certainly not to try to impose a new process. Instead, encompass all the existing processes to create a new philosophy of implementation. Avoid pitfalls and gaps, and play to the strengths of your team to operationalize a functional design and development processes.
Steven will talk about methods he's devised and used with business, analysts, and developers that make everyone happy and help assure projects actually launch.
Presented at D2WC in Kansas City on 17 March 2012
"A scenario is a description of a person’s interaction with a system.
Scenarios help focus design efforts on the user’s requirements, which are distinct from technical or business requirements.
Scenarios may be related to ‘use cases’, which describe interactions at a technical level. Unlike use cases, however, scenarios can be understood by people who do not have any technical background. They are therefore suitable for use during participatory design activities." http://infodesign.com.au/usabilityresources/scenarios/
User Centered Execution for Mobile UX DesignersSteven Hoober
The biggest barrier to good experiences (as well as the largest problem for most UX designers) is in getting well-intended, well-designed systems executed as the business owners and design teams intend. I present the problem, and a series of philosophical changes and specific tactics to alleviate this, and to work with implementation teams to get design executed correctly.
Slideshow I will present 29 Feb 2012 at 10 am PT as an O'Reilly webcast:
http://oreillynet.com/pub/e/2103
UX Prototyping (UXiD) - Handout by Anton Chandra and Bahni MahariashaAnton Chandra
This is handout presentation on UXiD 2018 event
Title: UX Prototyping - How to make it and define the success metrics
by Anton Chandra and Bahni Mahariasha
BEST PRACTICES FOR COMMUNICATING WITH KEY PROJECT STAKEHOLDERS A Case StudyEna Arel
Convincing the organization to embrace a new IA is no small task. Effective communication with key project stakeholders is essential for winning—and keeping—their support in managing change. Cross-functional stakeholders typically present diverse and, sometimes, conflicting requirements that must be successfully reconciled. This presentation describes how the Mathworks Documentation Group engaged with various stakeholders across the organization to redesign and implement a new Help system over the past three years. Learn how our communication strategies and tactics helped us to build organizational consensus around requirements and structure design reviews to inspire support for the new IA across the organization.
Conference talk at DevRelCon London 2019.
At the heart of scalable and intuitive APIs is great user experience, but the UX of an API is rarely considered. Learn how to integrate UX strategies to create improved API experiences using real life examples and lessons learned from upgrading Shopify’s own API.
I recently attended the Interaction Design training at Cooper (http://www.cooper.com/#training:interaction_design).
This presentation is a brief overview of the training and Cooper process from the perspective of a software developer.
Get hands-on advice for rapid Agile prototyping in a product team.
You'll learn:
- How to determine the right depth and breadth for MVP prototypes.
- How to prioritize use cases for prototyping.
- How to elicit the right stakeholder and user feedback.
- How to correctly annotate prototypes for dev and QA.
Are you about to start work on a new Web project? Have you planned the project accurately and completely? Thorough planning can avoid so many issues later in the project, but yet it is often ignored or done hastily. In this white paper you'll get a detailed look at the planning process that CommonPlaces employs. With documents such as site maps, site wireframes, content type descriptions, and technology assessments, you can give your project a much higher chance of success.
Responsive web design is hard and one of the most difficult things to work out is representing visual design in a flexible manner that can accurately be translated to code. In this panel we will discuss how we used InDesign to create flexible comps and rapidly iterate between multiple designers. We went with the concept of ‘just enough’ design to get us into code, where we could validate our design decisions. We will also go into how we iterated after the code was done but the design was not. We borrowed heavily from Upstatements approach to designing the Boston Globe but ran into our own unique challenges along the way.
Presenters: Brent Laverty, Georgia Cowley, Warren Schultheis, Ryan Gantz, Ted Irvine, Josh Laincz
The Design Sprints are a 2-5 days process for answering critical business questions through design, prototyping, and testing ideas with customers.
In this keynote I present you the Google Venture Design Sprints Methodology.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
2. i Introduction 27 Provide lazy registration
28 Take advantage of web
GETTING STARTED
typography
1 Think big picture 29 Design your color palette
2 Connect the goals 30 Provide instant feedback
3 Get everyone involved
4 Hold fewer (more relevant) CONTENT STRATEGY
meetings 31 Tell a story
5 Hear every voice 32 Remember the microcopy
6 Look beyond feature requests 33 Learn the jargon
7 Design collaboratively 34 Plan a content audit
8 Over-communicate 35 Rewrite, reuse, republish
9 Share knowledge early 36 Supplement with synonyms
10 Build relationships 37 Vary your medium
38 Split test your content
USER RESEARCH
39 Account for edge cases
11 Build personas
40 Anticipate errors
12 Get face time with your users
13 Use paper prototypes FRONT-END DEVELOPMENT
14 Test usability...online 41 Highlight real-time changes
15 Listen to actions 42 Load lazily
16 Vet your ideas 43 Build with progressive
17 Choose your test wisely enhancement
18 Follow the flow 44 Strategize for the small screen
45 Research your UI approach
UI DESIGN
46 Use sprites to improve
19 Prioritize top tasks performance
20 Obey real-world rules 47 Take advantage of HTML5
21 Sketch your ideas 48 Organize your CSS
22 Research UI patterns 49 Consolidate your files
23 Follow the MAYA principle 50 Separate CSS classes from IDs
24 Document your UI patterns
ii Learn more
25 Use tabs effectively
iii About ATF
26 Reduce clutter: show actions on
iv Appendix
hover
3. Introduction
Creating a good user experience (UX) is often the key to a product’s
success. After all, how many customers will give a product or service
a second chance if their first experience was a bad one? If you’re
involved in creating a product, it pays to design each aspect of the user
experience so that your customers come away satisfied and delighted.
Of course, UX design has many facets; trying to learn everything at
once, it’s easy to get overwhelmed.
That’s why we wrote this eBook. Our daily work in the UX design field
has led us to some tried-and-true best practices that you can apply to
most software design situations, whether you’re a designer, copywriter,
developer, or a mix of many roles. We hope that this book will teach
you some new tricks, while reinforcing concepts you’re already
implementing today.
Use this book as best fits your needs. Skim through it on your own;
incorporate a few practices into your next project; share these tips
with your team; add them to your UX toolkit. And if you find this
book useful, please pass it along to others as well.
4. GETTING STARTED
How do you kick off?
1 Think big picture
2 Connect the goals
3 Get everyone involved
4 Hold fewer (more relevant)
meetings
5 Hear every voice
6 Look beyond feature requests
7 Design collaboratively
8 Over-communicate
9 Share knowledge early
10 Build relationships
5. GETTING STARTED 1
Think big picture
The details of a project are clearly important. But getting too caught up in the
details can lead to a disjointed and inconsistent user experience over time.
To keep the project on track, you need a shared vision of the project’s future.
Start by envisioning what the experience of using the product will be like 5
years from now – once all the kinks have been worked out. Keep that goal in
mind while working on the day-to-day elements.
Document the short and long term goals early on in the process, and review
them daily or weekly to keep them on the team’s mind.
Think of the gears as the details...
...and the big picture as the clock –
all the gears need to fit together to
make the clock work.
6. GETTING STARTED 2
Connect the goals
Many projects start without a clear sense of the final objectives. The basic
project goal may be known, but often the business goals and user goals are not
articulated or shared. Additionally, the goals of a company don’t always play
nicely with user goals. This leads to designs that either frustrate users or don’t
align with business needs.
The solution? Identify all goals up front, and resolve conflicts early on.
Conduct interviews with stakeholders and C-level executives at the start of
a project to learn their expectations. Then compare user goals and business
goals, to help identify conflicts and create applicable design solutions.
I want... We want...
The sweet spot
Tip For more insight on how to balance user and business goals, read
Paul Boag’s article “Business Objectives vs. User Experience” in
Smashing Magazine.
7. GETTING STARTED 3
Get everyone involved
Stakeholders (those who are not directly working on the project every day)
bring different perspectives to the goals and needs of a project.
Where in the timeline do your stakeholders get involved?
Kickoff Wireframes Usability Wireframes
Meeting Round 1 Testing Round 2 Launch
Awesome!
Everyone’s on the same page. (See #9:
Share knowledge early) for more.
Excellent.
Some catch-up required to bring
the stakeholder up to speed.
Great.
Now the stakeholder can see how users are
interacting with the wireframes, and can add her
feedback to influence future rounds.
Uh oh.
Just when everyone thought they were
on the same page, the stakeholder needs
to get caught up on why these decisions
were made, and her valuable feedback
could mean redoing a few weeks of work.
Start over!
“This isn’t what I
had in mind at all!”
Avoid the risk of having to start over by getting everyone involved as early as
possible.
8. GETTING STARTED 4
Hold fewer (more
relevant) meetings
Meetings get a bad rap as a time sink, an interruption from “real” work, or an
opportunity for some boss to hear the sound of his own voice. You can add a
valuable opportunity for your team to collaborate and make meetings a
positive thing with just three steps:
Define a detailed meeting Brainstorm landing page
Weekly check-in
agenda with clear roles for all
Brainstorm phase 1
involved, and clear goals. Menu discussion
functionality
Ask developers for
advice on wireframes
Ask developers to
talk to designers
Consider who needs to
attend. Include people who you
need involved in collaborative
discussion, but send notes later
to those who just need the final
decisions.
Feature planning:
• Review creative brief
• Brainstorm phase 1
functionality
Use activities like those found in • Prioritize features
Gamestorming to get everyone
Weekly check-in:
engaged and participating. (See • Review goals
#5: Hear every voice.) Design review (R2):
• Individual updates
• Determine next steps
• Gather feedback
• Talk about menu
• Discuss initial
development plan
9. GETTING STARTED 5
Hear every voice
Problem Meetings can be overpowered by one or two people with
strong opinions and voices.
Solution Use brainstorming activities to hear every voice during the
opening discussions, and make a point of asking the quieter
people to provide their thoughts, whether in the moment or
via email later.
Use 5-Finger Voting to determine group priorities.
Tip Dave Gray’s Gamestorming book is filled with group collaboration
ideas, and new ones appear regularly on the Gamestorming website.
10. GETTING STARTED 6
Look beyond feature
requests
When users start requesting features, take a step back and ask: What is the
problem they are trying to solve?
For each feature request a user makes, identify the problem; from here you can
brainstorm a well-considered solution. Even in the case where the user’s
suggestion is the best solution, you still gain better understanding of your
customer and their needs.
“Can you ensure first-time
“Can you add a tutorial on
users will understand how to
how to use the app?”
use the app?”
What users say What users really mean
Tip Keep your usability tests going regularly to keep the feedback loop
open and continuous.
11. GETTING STARTED 7
Design collaboratively
Collaboration requires a little extra time, but can vastly improve the overall
design of the application if done effectively.
For example, the first round of wireframes is as much about discovering the
best flow as it is designing the screen layouts, so it’s a great time to get your
team brainstorming.
Tip Give the room 30 seconds to write features on sticky notes.
Then, as a group, decide what features belong together, and
watch the screens take shape.
12. GETTING STARTED 8
Over-communicate
What would happen if you were hit by a bus? Or, less drastically, what happens
during a team disagreement about a past decision, when no one has a
written record?
Email recaps and regular check-ins
feel like a huge waste of time when
everything’s going smoothly, but on
complex projects, having a written
record of team decisions and
keeping everyone up-to-date
regularly can prove invaluable.
To save time, ask the team to spend
15 minutes at the end of each day to
send out a recap of all decisions that
influenced their work, or to bring a
brief recap of their progress to any
check-in meetings.
The whole team will benefit, as
misunderstandings can be caught
earlier in the process. And should
anyone need to call in sick, there will
be a written record of where they left
off work.
13. GETTING STARTED 9
Share knowledge early
Traditional design specification (spec) documentation requires a lot of effort,
and it frequently can’t keep pace with design and functionality changes.
Shared understanding brings together multiple perspectives and sheds light on
possible snags early in the process.
“[Designers] are in the problem-solving business, and [they] don’t solve
problems with design documentation. [They] solve them with elegant, efficient
and sophisticated software.” —Jeff Gothelf, Lean UX
Month 4 Day 1
Shared
n Spe
c understanding!
Desig
vs
Developer
Developer Designer
Tip See #8 (Over-communicate) for more information on where and how
documentation can be beneficial.
14. GETTING STARTED 10
Build relationships
True or false?
Everything you need to know about your users you can learn from analytics.
False. Analytics are important, as are the results of any quantitative tests, but
the best companies are built on relationships.
By focusing on your customers and getting to know them as individuals, you’ll
not only build brand loyalty, you’ll also be able to improve your product with a
steady supply of persona details (see #11: Build personas), usability testers, and
users to interview.
Tech savvy
Tech savvy
Grew up in many states Grew up in many states
27% bounce 27% bounce rate
rate Studied biology Studied biology
12.3242% 12.3242% Explores new cities
Explores new cities
45 views per 45 views per month
month
Listens to
Eats to
Listens
sweets sweets
Eats
75% male 75% male Likes jogging Likes jogging
325,090 clicks
325,090 clicks Plays piano piano2 kidsHas 2 kids
Plays Has
13.902% 13.902%
$4.93 $4.93
#000325301 #000325301 Edward
15. USER RESEARCH
Learn what your users know
11 Build personas
12 Get face time with your users
13 Use paper prototypes
14 Test usability...online
15 Listen to actions
16 Vet your ideas
17 Choose your test wisely
18 Follow the flow
16. USER RESEARCH 11
Build personas
Mike Jones manages products at Company X. His goal is to find the right audience
for his product, and he learns about his audience through online forums and by
interviewing users.
He has a team of two subordinates who help him collect and analyze data on their
audiences. He holds weekly check-ins with his team, and is rigorous in sending
feedback and updates.
This is an excerpt from a persona.
Personas are created through
interviewing multiple individuals in
the same position, and compiling
their personalities, needs, challenges,
and expectations into an imaginary
user. Through developing personas
your team can identify and prioritize
the specific goals of your target
audience.
Tip After building your personas, put them to work – prioritize features
according to what your personas need. It’s easier to make decisions
for a specific user (or persona) than for a generalized audience.
17. USER RESEARCH 12
Get face time with
your users
Every product developer knows
his market, but without user
research he often lacks concrete data
from which to form personas or
prioritize features. Just remember
this mantra:
A little face time is better than
none at all!
User research can take many forms,
including surveys, interviews,
ethnographic studies, and usability
testing – so do whatever you can,
trying some of each if possible.
Tip If you don’t have access to users in your target market, go to your
local coffee shop and offer gift cards in exchange for quick usability
tests. It’s surprising what insights you may gain!
18. USER RESEARCH 13
Use paper prototypes
Design debates arise with any team; luckily most can be resolved with a paper
prototype. Paper prototypes involve the same components as other
prototypes: screens, users, interactions… everything but the computer!
1 Sketch the screens for the interaction you want to test, including buttons,
modal windows, and other interactive pieces.
2 Ask an objective person to act as the “user.”
3 As the user “clicks” on the “screen,” act as the computer, simulating
actions and interactivity. Your team members can observe successes and
struggles, as in a traditional usability test.
This paper usability test offers
immediate feedback in several ways:
• The team will receive clear,
real-time feedback, solving
design debates.
• You’ll discover insights that no
one thought of previously.
• Your objective user will provide
you with a new perspective.
Tip If possible, find a user who fits your target audience. At the very least, use
someone who hasn’t seen or heard about the in-progress application.
19. USER RESEARCH 14
Test usability...online
Problem Traditional usability testing can become cost prohibitive,
time consuming, and challenging to execute.
Solution Traditional usability testing is not the only way to catch the
sticking points in your application. If you’re pressed for time
or short on funds, you can use an online service such as
UserTesting.com or Loop11 for quick and dirty feedback
within days.
Keep in mind that this solution works best when you’re
testing an application among general users rather than
specific target audiences.
Loop11 gives the user a simple way to complete usability tasks.
Tip Use an online service for your regular monthly testing, but
conduct the targeted, in person usability testing when rolling
out new features or making major updates to the UI.
20. USER RESEARCH 15
Listen to actions
During a usability test, users are asked to share their thoughts as they go.
Sometimes they state a strong opinion, but their actions don’t match.
It is up to your team to observe their reactions and behavior, rather than
focusing on the spoken statements. In particular, any time you hear a user say
“I would do X...” take it with a grain of salt.
Help users along by asking them to talk about the decision making process,
and what they think as they choose their course of action through your
application. Listen to what they say, but pay closer attention to what they do.
This area here?
No... I wouldn’t
click on that.
click
21. USER RESEARCH 16
Vet your ideas
Any entrepreneur can tell you that life isn’t fair: no sooner do you come up with
a brilliant idea, than you need to prove its worth. Will users be interested in it?
Is it worth being funded? Will it hit your target market?
Startups know the story well: without
a way to validate user interest,
funding can be hard to come by and
you can spend months or even years
spinning your wheels. But now there
are online services that measure user
IDEA IDEA IDEA IDEA
interest, and help you learn more
GAUGE GAUGE about your target market by enticing
USER USER
INTEREST
INTEREST your potential users to sign up for
updates and more information!
BUILDBUILD
BUILDBUILD
LAUNCH
LAUNCH
LAUNCH
LAUNCH
The Internet provides many places to vet your ideas.
Tip
Try LaunchRock, for one.
22. USER RESEARCH 17
Choose your test wisely
Which test is right for your needs?
23. USER RESEARCH 18
Follow the flow
Using Custom Variables in Google Analytics will help you segment your
customer base and track where customers navigate to in your application.
1 Set a custom variable whenever you sign up a new customer.
2 View the Visitor Flow report in Google Analytics to see the flows your
customers are following.
3 Cross reference the report with your expected navigation flow. If the two
don’t align, then it’s time to rethink terminology or redesign the page
where users are stumbling.
Tip Take a look at the Custom Variables setup guide from Google Analytics.
24. UI DESIGN
Designing with data
19 Prioritize top tasks
20 Obey real-world rules
21 Sketch your ideas
22 Research UI patterns
23 Follow the MAYA principle
24 Document your UI patterns
25 Use tabs effectively
26 Reduce clutter: show actions
on hover
27 Provide lazy registration
28 Take advantage of web
typography
29 Design your color palette
(but not from scratch)
30 Provide instant feedback
25. UI DESIGN 19
Prioritize top tasks
Set one primary goal for your users on each screen. If you have multiple goals
in mind, identify the primary goal by asking these questions:
Who is my ideal audience?
Where do I want to send them on my application/site?
What call to action will best direct users to the primary goal?
How do the secondary goals relate to the primary goal? (You may find
that your secondary goals are so unrelated that they deserve a
separate page altogether!) How many goals do I have
altogether? Are they all for the same audience?
Prioritizing is much easier once you know your audience and their goals. With
a little prioritization, your screens can become cleaner, crisper, and far more
commanding.
26. UI DESIGN 20
Obey real-world rules
Even if you don’t favor faux-real interfaces like Apple’s iBooks, almost every
interface you design will take some cues from real-world physical effects like
lighting and perspective. Make sure those effects are applied consistently and
sensibly; otherwise it’s easy for users to become disoriented.
For example, if your buttons have a highlight along the top edge, and a
gradient that darkens at the bottom, that implies a light source shining from
above. Don’t switch it up and include other elements on the same screen that
look like they’re lit from below.
Apple’s iBooks app uses realistic lighting to depict a bookshelf.
Tip Looking for more details? Check out the chapter on visual principles in
Stephen P. Anderson’s book, Seductive Interaction Design.
27. UI DESIGN 21
Sketch your ideas
Don’t be afraid of sketching! A quick drawing is often the best way to visually
articulate goals and requirements, and you don’t need art classes to do it.
Simple Most interactions can be represented by simple rectangles,
circles and triangles.
Complex Digital tools such as Balsamiq, Mockingbird, and Omnigraffle
come pre-loaded with basic shapes, text tools, form elements
and annotation graphics.
28. UI DESIGN 22
Research UI patterns
When you need to create a new piece of UI functionality, it’s best to do some
research first, to find out if someone else has already solved the problem you
are facing.
Many sites exist to showcase UI
patterns (reusable widgets that solve
common problems) such as
pagination, tabs, or faceted
navigation.
In addition to saving you time and
effort, UI patterns make use of
existing conventions. Since these
patterns are already familiar to users,
they are usually preferable from a UX
perspective, no matter how
innovative your prospective new
solution might be. UI-Patterns.com shows examples of pagination.
Tip UI-Patterns.com, PatternTap, and the Yahoo! UI Design Pattern Library
are some examples of well-maintained UI pattern galleries.
29. UI DESIGN 23
Follow the MAYA principle
Problem
You can only raise the bar as high as
your audience will let you; deliver an
experience that’s too far from what
they’re comfortable with, and they’ll
walk away.
Solution
MAYA (Most Advanced, Yet
Acceptable) is a maxim to live by.
Designers and innovators must
pave the way toward the future,
but in gradual steps—delivering
experiences that break new ground,
but still contain enough of the familiar
to be acceptable to the people for
If computers existed before anyone could
whom they’re designed. understand them, no one would use them.
Tip User interviews will help you to understand the daily life of the
people for whom you’re designing, and give you insight into what
will be “acceptable” to them.
Read Jim O’Neill’s article ”Deliver the Future, Gradually” to learn
more about the MAYA principle.
30. UI DESIGN 24
Document your
UI patterns
Doing something right once saves
you the trouble of needing to do
it again. So when you build a UI
widget that you (or others on your
team) may want to reuse, don’t
keep it hidden – put it somewhere
that everyone can find it when they
need to.
Create a UI pattern library for
your project – a living document
(preferably in code) that compiles
all the reusable patterns you
have created, making them clear
and easily available to everyone
on the team, and to people who
join in the future.
Your library could be as robust
as Bootstrap (see right), or
much simpler, depending on Bootstrap, from the folks at Twitter, is a publicly-
your needs. available UI pattern library.
31. UI DESIGN 25
Use tabs effectively
Tabs are a sorely misunderstood UI element. They are frequently employed as a
navigation device, even in such popular places as Amazon.com or in the
System Properties of your PC. Rarely are tabs used to do what they do best:
alternating between views.
The debate rages on over whether or not tabs-as-navigation is actually
“misuse,” but it can easily become overused. By following Jakob Nielsen’s
13 Guidelines for Tabs, you can ensure your tabs stay in their rightful place.
Tip You can use UI pattern galleries to explore alternatives to tabbed
navigation (such as scrolling, sidebar navigation, or dropdown menus).
32. UI DESIGN 26
Reduce clutter: show
actions on hover
When each row in a data set or table contains a set of actions (such as “edit”
and “delete”) the table can become cluttered.
Clean up the interface by only showing those actions when the user hovers
over the row with her cursor.
Basecamp shows Edit, Delete, and Move action icons when hovering over each item in a to-do list.
Tip Hover doesn’t work for mobile devices. Instead, consider cutting
down functionality to allow only the basics, or filter the functionality
into a few different pages.
33. UI DESIGN 27
Provide lazy registration
You wouldn’t buy a car without taking it for a test drive. However, when you
ask users to create an account before giving them a chance to use your service,
you are asking them to do just that. This approach can scare people away from
using your product.
Instead of asking for an immediate sign up, let users enjoy the service first,
and then provide them a way to save their information and “lazily” create
an account.
Grooveshark lets you create playlists, but to save them you must register.
Tip To make sign-up even lazier, allow integration with other platforms
such as Facebook, Twitter, and Google+.
34. UI DESIGN 28
Take advantage of
web typography
There was a time when Arial, Verdana, Georgia, Trebuchet and Times New
Roman were the only fonts available to web designers. Putting text into images
provided more options, but at the cost of SEO and accessibility.
Today, web typography is emerging as a solution. TypeKit and Google Web
Fonts, among others, allow designers to use a wide range of fonts while leaving
the text in HTML, where it can be read by search engines and screen readers.
TypeKit allows you to browse and try various typefaces.
Tip With great power comes great responsibility. Be judicious with
typography choices to preserve the aesthetic of your website
or application.
35. UI DESIGN 29
Design your color palette
(but not from scratch)
When you need to create a color scheme for your new product or application,
don’t just make it up as you go along. Instead, take the time to plan out a
palette, but design smart: start from a pre-made palette and tweak as needed.
Some tools to get you started include:
• Adobe Kuler for Designers
• Color Scheme Designer
• 21 Stimulating Color Palette Tools
Adobe Kuler offers a constantly-updating library of color palettes.
Tip Whatever color scheme you design, include one or two neutral
tones for the text-heavy areas.
36. UI DESIGN 30
Provide instant feedback
Form fields should be designed with the best possible user experience in mind:
1 Fill out a form.
2 Receive an alert “Something on this form is incorrect!”
3 Give up and go home.
Wait. What? Let’s try that again…
1 Fill out a form, and see clear indicators of whether your information is
being accepted.
2 Correct errors quickly as you go.
3 Success!
The example above provides a checkmark icon for correct fields and a warning icon with a message for
invalid entries.
Tip Use JavaScript animations to make form field interactions friendly and
fun. Example: Tumblr’s sign up form box shakes to indicate incorrect field
values (like a password that’s too short).
37. CONTENT STRATEGY
Tell a story to create context
31 Tell a story
32 Remember the microcopy
33 Learn the jargon
34 Plan a content audit
35 Rewrite, reuse, republish
36 Supplement with synonyms
37 Vary your medium
38 Split test your content
39 Account for edge case
40 Anticipate errors
38. CONTENT STRATEGY 31
Tell a story
Storytelling has been a compelling
form of knowledge transfer since
before the written word.
From Plato to Steve Jobs, fairytales to
business pitches, stories are an integral
part of content strategy.
When you tell a story you engage
your users. It can be the story of a
journey, or a lesson learned, or a
triumph, or a challenge, or nostalgia,
relaxation, achievement, or many
other possibilities.
It can be told through the colors you
choose, through any medium, and in
multiple ways.
By telling a story, you put your product
in context and give meaning to your
users.
39. CONTENT STRATEGY 32
Remember the microcopy
Microcopy refers to the tiny snippets of copy that often appear near form fields
and inside complicated processes. These provide contextual help, clarification,
or reassurance at moments of potential confusion.
We tend to overlook the possibilities for good copy on a
detailed level, as well as the reality that users are often one
(preventable) hesitation away from abandoning a form, application,
or site altogether. Make sure that your content team takes the time to go
through each form page and identify opportunities for helpful microcopy!
Tip Usability testing is very effective at uncovering spots in an application
where microcopy would be useful – it’s often painfully easy to see
where users hesitate or go wrong due to confusion.
40. CONTENT STRATEGY 33
Learn the jargon
We’re not talking about business jargon… unless your target users are
businessmen. The people who use your product have a language all their
own. When you learn to speak their language, you can ensure your application
doesn’t miss the mark.
chai triple-shot
espresso
Starbucks
brownie
grande
barista coffee
caffeine frappuccino
venti
Starbucks customers and employees share a certain specialized language.
Tip Interview your users and listen to how they express themselves,
so you can match their tone. (See #12, Get face time with your users.)
41. CONTENT STRATEGY 34
Plan a content audit
A content audit is a critical part of building or redesigning any complex
application or site. Planning and organizing your content audit can be as easy
as 1-2-3:
1 Set up a spreadsheet with sections for Screen, Attribute, Messaging, Call
to Action, Audience, and Notes
2 Consider each attribute on each screen (Attributes include headline, sub
header, paragraph text, image, video) and the relevant messaging.
3 Use the completed spreadsheet to help make decisions on what content
to keep, and then track the creation of new content.
42. CONTENT STRATEGY 35
Rewrite, reuse, republish
Creating quality content can be a lot of work. Writing social media updates,
blog posts, forum discussions, site content, and videos in a consistent voice on
a regular basis can cause burnout. So what do you do? Rewrite, Reuse,
and Republish.
Quote your website. Make a blog post
into a video. Make a discussion into Rewrite
a SlideShare by adding images to
illustrate the main points. Quote
blog posts as forum responses.
blish
With some savvy marketing, a
Re
little content can go a long way.
u
us
p
e
Re
Tip For more suggestions on reusing content, view Barbra Gago’s slideshare,
”15 Ways to Distribute Content.“
43. CONTENT STRATEGY 36
Supplement with
synonyms
Problem Different people use different terms when they think about
your product – even members of your target audience will
interpret one word in multiple ways. Ensuring that users can
use different words to find what they’re looking for on your
site is a content strategy challenge.
Solution Create a taxonomy! By writing up a list of synonyms for each
important term relating to your company, product, and
application, you will learn to identify with different segments
of your audience. Once you have a basic taxonomy, all future
content will come together much more easily.
A sample taxonomy used by Above the Fold.
Tip Read Heather Hedden’s article, “Better Living Through Taxonomies”
for a more detailed explanation on taxonomies.
44. CONTENT STRATEGY 37
Vary your medium
Content is more than just copy! Consider where your audience spends time,
and how they access information.
If your audience tends to surf the web online during work hours, they may
find a blog post more helpful than a noisy video. Or if you have a particularly
complex piece of information to get across, an infographic can help clarify it.
Text
Audio Sketch
Graph
Video Photo
Video
Text
Sketch
Audio
Audio
Photo
Sketch Text
Video Graph
45. CONTENT STRATEGY 38
Split test your content
After creating new content, instead of simply replacing your old content,
conduct an A/B split test to see which delivers better results in the real world.
In a split test, each user is served one of the two versions at random, without
knowledge of the other one. Users’ behavior on each of the versions can then
be tracked and measured.
45% 35%
A B
Version A Version B Conversion Rate
Tip Tools like Google Website Optimizer can help you automate
the testing process, allowing you to run tests easily by installing
a simple tracking code.
46. CONTENT STRATEGY 39
Account for edge cases
Edge cases are a reality in every design. When dealing with a database
application, understanding the real data that goes into the system is key to
identifying potential edge cases which can cause the application to break.
Provide your team with real or simulated data early in the design process.
With actual data (not “lorem ipsum” or filler data), the team can see how the
interface might break if the design doesn’t accommodate the edge cases.
Address Address
1234 Lorem Ipsum Street 686 Massachusetts Ave,
Suite 304,
1234 Lorem Ipsum Street
Cambridge, MA 02139
1234 Lorem Ipsum Street
9674 Broad St, Chicago, IL 60625
1234 Lorem Ipsum Street
31 Spooner Street,
1234 Lorem Ipsum Street North Kingstown, RI 02852
While designers should design for the most practical use cases first, these edge
cases can’t be ignored. The more complex the application, the more edge
cases need to be considered.
Tip Check out Luke Wroblewski’s interview series with designers
who give their perspective on edge cases.
Struggling with edge cases? Ask your development team for some
help interpreting the content and structure of your databases.
47. CONTENT STRATEGY 40
Anticipate errors
Which of the following two error messages makes you feel confident about the
website you’re visiting?
Considering the user experience includes considering how we present the user
with error messages. Detailed and appropriate (and sometimes even humorous)
copy helps the user to move forward.
As your team designs the application, think through the possible errors a user
might encounter at each step of the process. Then craft a response or solution
for that error to help the user get back on track.
Tip Ask developers to provide a list of error messages, along with
context such as when users will see those messages. Then you can
create new error message copy appropriately.
48. FRONT-END DEVELOPMENT
Build a strong base
41 Highlight real-time changes
42 Load lazily
43 Build with progressive enhancement
44 Strategize for the small screen
45 Research your UI approach
46 Use sprites to improve performance
47 Take advantage of HTML
48 Organize your CSS
49 Consolidate your files
50 Separate CSS classes from IDs
49. FRONT–END DEVELOPMENT 41
Highlight real-time
changes
Failing to notice changing information has consequences. When you fail to
notice a friend’s haircut, you only risk social embarrassment. But when a user
fails to notice information that just updated on a page in your application, the
consequences are more dire – she may not know what to do next, and you may
lose her as a customer.
Build in visual cues to draw attention to information that has just changed. Here
are some ways to transform the text on your page:
• Change the background color surrounding the item in question
• Change the font color or font weight
• Consider adding in some animations, either via CSS3 or JavaScript
Todoist briefly highlights text that was just added.
Tip Regardless of your choice of transformation, you can gradually
“fade” the effect back to normal to signal to the user to continue on
her journey.
50. FRONT–END DEVELOPMENT 42
Load lazily
Problem
Traditionally loading pages allows
all the data to load before anything
appears onscreen. This often leaves
users waiting, which nobody likes.
Solution
Use lazy loading: get all the static
page elements loaded first, and then
load the immediately visible data. As
the user scrolls down, more elements
can load, progressively.
51. FRONT–END DEVELOPMENT 43
Build with progressive
enhancement
Anyone with an older Internet-enabled phone has encountered the major
problem with “graceful degradation.” Older devices and browsers can’t handle
new features and interactivity, and it is often painfully clear that features are
missing, because older devices were a low priority.
When a user can tell that they are missing out on features because the
developers didn’t bother, that’s a bad experience – and a preventable one.
To provide a good experience for
everyone:
1 Focus on content first. Build a
basic experience that everyone
can access, which delivers your
content in a clear, readable way.
2 Apply the visual presentation
next, for devices that can handle it.
3 Layer the interactivity on top,
for those capable devices.
This approach, done right, leaves no
one behind.
Tip For more on progressive enhancement, read Aaron Gustafson’s
article in A List Apart, or Filament Group’s book on the subject.
52. FRONT–END DEVELOPMENT 44
Strategize for the
small screen
The use of mobile devices for browsing the web is so prevalent, every single
website and application should be usable on a small screen. But far too many
aren’t, either due to lack of understanding or lack of resources.
If your organization doesn’t have the resources to design a full mobile solution,
you can still achieve mobile-friendliness quickly and easily.
Consider using CSS media queries to make a few small layout and navigation
adjustments for smaller screens, or fall back on a nicely-designed text-only
stylesheet if you need to. These considerations need to be on your radar,
especially if you don’t have buy-in to go forward with a full-scale mobile effort.
Tip Get started with Responsive Web Design by reading
Ethan Marcotte’s article on A List Apart.
53. FRONT–END DEVELOPMENT 45
Research your
UI approach
Which UI development approach is better for you: programmatic or
declarative?
Programmatic Declarative
• Develop the UI in code. • Create the UI in markup.
• Can be harder to learn, read and • May not provide much
understand. out of the box functionality.
• UI is coupled with your code. • Flexible -- often the better choice.
Ultimately, the best choice for you depends on your application and your team.
Evaluate the pros and cons of each approach before making a final decision.
A programmatic “Hello World” app in Sencha. A declarative “Hello World” app in HTML/jQuery.
54. FRONT–END DEVELOPMENT 46
Use sprites to improve
performance
Problem
Loading a separate file for every
image, especially when your site has
more than 50 icons, can generate
many HTTP requests and slows down
your site’s load time.
Solution
Create a sprite – a single graphic file
containing all 50 icons, each spaced
a certain distance apart – and save it
Amazon uses compact sprites for their button states.
as a single image (PNG, JPG or GIF).
Use background-image positioning in
CSS to display only the icon you need
in any given instance.
Tip The CSS Sprite Generator is one of many tools that create sprites
for you automatically. You can read more about sprites on CSS Tricks.
55. FRONT–END DEVELOPMENT 47
Take advantage of HTML5
Did you know that HTML5 provides many new input types? Browsers on most
smartphones and tablets often change the virtual keyboard layout based on
the input type in a way that saves users time and frustration.
New field types include:
• url • date • number • search
• email • month • range • tel
• datetime • week • color • time
• datetime-local
Tip If you’re worried about browser support, never fear. Browsers ignore
any input type they don’t understand and render it as a normal <input
type=”text” />.
56. FRONT–END DEVELOPMENT 48
Organize your CSS
Applying a standard organization plan to your CSS code will prevent it from
becoming bloated and disorganized, as is all too common in large projects.
• Use comments to create headings
for different sections of the
document, and comment liberally
throughout the file.
• Include a table of contents within
comments at the beginning of the
file, listing all the different sections
in order.
• To make searching within a CSS
file fast and easy, precede each
heading with a search flag – a
special character that is uncommon
in CSS code, such as an equals
sign (=). For example, if the page
layout styles are in a section named
“=Layout,” then you only have to
search for “=La” to jump directly to
that section.
57. FRONT–END DEVELOPMENT 49
Consolidate your files
Maintaining a set of well-commented CSS and JavaScript files that are
separated according to their purpose is great for development, but slows down
performance on a production website or application. How can you consolidate?
As part of your standard process for pushing code to the production site,
merge all CSS into one file and all JavaScript into another file. Then minify the
code by stripping out all extraneous comments and white space. This can
result in significant performance savings, due to smaller file sizes and fewer
HTTP requests.
Tip Consolidation and minification can be done automatically
using a tool such as Minify.
58. FRONT–END DEVELOPMENT 50
Distinguish CSS classes
from IDs
Combining CSS selector types without a structure produces messy,
unmanageable code. Keep your selector types in line with a general guideline.
Use CSS classes (e.g. “.page-title”) to apply visual styles. This works well
because classes are infinitely combinable and they cascade easily.
Use IDs (e.g. “#cta-donate”) mainly to pinpoint specific elements in the DOM
in order to trigger interactive behavior. This is great for performance, since the
browser can find an ID faster than it can find a class name.
Tip Plan how to structure your markup in advance, but accept that every
situation is unique and that you will encounter exceptions.
59. Learn more
We hope the tips in this book give you a good starting point for improving your
UX. If you find you have more questions on user experience, best practices
or anything relating to this book, contact us! We love conversation and we’re
happy to help with all your UX needs.
Questions or comments? Above the Fold is located at:
Get in touch with ATF: 686 Massachusetts Ave, Suite 304
Cambridge, MA 02139
Web: www.abovethefolddesign.com
Email: hello@abovethefolddesign.com
Email us Visit us
Visit us on Facebook: Did you like this eBook?
www.facebook.com/abovethefold Share it with your friends:
Follow us on Twitter:
www.twitter.com/abovethefold
Share us Tweet us
60. About ATF
Above the Fold is a user experience design agency that values people
– that means you, our customers, and your customers too.
From the first consultation through the final line of HTML, our team
delves into your goals and your users’ needs to create a custom
design solution for your business. Each project is more than just a set
of deliverables; it’s a chance to create long-lasting relationships – for
you, your customers, and us.
62. Web resources in this eBook, continued
27 Grooveshark: http://grooveshark.com/
28 TypeKit: https://typekit.com/fonts
29 Adobe Kuler for Designers: http://kuler.adobe.com/
Color Scheme Designer: http://colorschemedesigner.com/
21 Stimulating Color Palette Tools:
http://www.sitepoint.com/21-stimulating-color-palette-tools-for-designers/
30 Tumblr’s sign up form box: https://www.tumblr.com/
35 Barbra Gago’s slideshare, “15 Ways to Distribute Content”:
http://www.slideshare.net/LeftBrainDGA/15-ways-to-distribute-content
36 Better Living Through Taxonomies:
http://www.digital-web.com/articles/better_living_through_taxonomies/
38 Google Website Optimizer: https://www.google.com/websiteoptimizer
39 Luke Wroblewski’s series of interviews:
http://www.lukew.com/ff/entry.asp?554
41 Todoist: http://www.todoist.com
43 Aaron Gustafson’s article on progressive enhancement:
http://www.alistapart.com/articles/understandingprogressiveenhancement/
Filament Group’s book on progressive enhancement:
http://filamentgroup.com/dwpe/
44 Ethan Marcotte’s article on responsive web design:
http://www.alistapart.com/articles/responsive-web-design/
45 Pros and cons of each UI approach:
http://candanny.wordpress.com/2011/08/14/declarative-vs-programmatic-in-
javascript-mobile-app-frameworks/
46 CSS Sprite Generator: http://spritegen.website-performance.org/
CSS sprites explained on CSS Tricks: http://css-tricks.com/css-sprites/
49 Minify: http://code.google.com/p/minify/