So much of the conversation around digital wellness involves user-based actions, but what responsibility does product design have? Explore why and how helping users establish healthier relationships with tech is becoming a design consideration.
Tag: web design
How to Improve Your 404 Page Design
As UX designers we work hard to understand where users tend to go wrong and why in order to prevent errors. But no one's perfect. Eventually someone’s going to make a typo, forget to input something, or hit the wrong button. Errors are part of the experience so UX design shouldn’t end with them. A bad error experience and all the work you’ve done up to that point may not matter. Your users get annoyed, confused, or frustrated and they’re gone. 404 pages are one of the more common culprits for this. Like every other page, they should have a design and content strategy that positively supports a good user experience. Check out some tips on how to create better 404 pages.
Toward More Gender-Inclusive Form Design
Forms are like icebergs. They’re deceivingly more complicated and troublesome than they appear on the surface. Screw up a form’s design and you can stop users in their tracks, preventing them from meeting their intended goals, your business from collecting valuable data, or both. There are a lot of decisions that should go into determining how a form will be look. Since being inclusive and respectful of someone’s identity contributes to better UX, it's important to think through how even the smallest, design choices can be adjusted to help more people feel welcome using your product.
Content Audit: Doctors Without Borders
In her book The Content Strategy Toolkit, Meghan Casey (2015) lists 3 methods for identifying the problems and opportunities of a website’s content: a content audit, an analytics review, and user testing. This first option – a content audit – is what she recommends starting with. For this post I’ve conducted a sample content audit of Médecins Sans Frontières/Doctors Without Borders' (MSF) external-facing website for the United States. Read my full content audit report to learn more about how I evaluated the MSF site and what I found.
A UX Research Report: Connecticut Forest and Park Association
In the last 25 years, business websites have evolved into powerful interactive hubs where users go for far more than brochureware. And as COVID-19 has shown, they are also now the front doors to organizations. Along with social media, they are often the first or only means of interaction people have with a business so, your website's experience better be on point. If it's not, the good news is it's never been easier to learn what it takes to build a good experience for your users. I recently completed a UX research project on ctwoodlands.org, the website for the member-based conservation nonprofit Connecticut Forest and Park Association. Check it out to see one approach for quickly getting the insights and direction you need for a successful redesign.
Usability Testing for an Existing Product
Usability is the measure of how well a person can use a product to achieve an intended goal. In a previous post, I talked about how usability testing should be a key part of any iterative design process, preferably being implemented as early as possible to identify design problems. But usability testing is also an important tool to evaluate existing products before you ever sit down at the drawing board to devise a change or new design.
Wizard of Oz Studies and the Application of Illusion for UX Research
How do you test something that doesn’t exist? The obvious answer is to build it. But what if it’s difficult, time-consuming, and/or expensive to build? You don’t want to risk wasting resources on an untested idea. A common approach that user experience designers (UX) use in such situations is Wizard of Oz studies.
A/B Testing as a UX Research Technique
Redesigning a website is usually about making its experience better. But change doesn’t guarantee better, just different. This is why user experience (UX) designers focus so much on user research. The more you know about user needs, as well as business and other requirements, the more you can eliminate some of that uncertainty about the impact of a new design. However, you will never know for sure how a design choice will perform until it's used with real users in real life. This is a nerve-wracking reality. A UX designer nor most project stakeholders are comfortable taking the risk of just changing something and seeing how it goes. Enter A/B testing.
Learn Web Development: It’s Empowering as F@#!
I finally got around to that “someday” task of taking a deeper dive into web development than just the hunt-and-peck-through-code-that-I-didn’t-know-how-to-read approach I’ve been using for the last 5 years. I figured this experience would confirm or deny once and for all whether my interest was genuine or a novelty. What I found is that learning how to build a website provided me with more than just a new skill.
Web Design Using A Template
So, you want to build a website, but you don’t know where to start. I have good news. Even though web design can be an intimidating process that requires technical and creative skills, you don’t always have to start from scratch. You can decrease the intimidation factor and even maybe decrease time and cost requirements of a website build by starting with a pre-built template.
Getting Started with SEO Basics
You’ve heard the acronym SEO. Maybe you know it stands for search engine optimization. And you’ve likely heard something to the effect of it being the unicorn strategy that will magically flip the script on your struggling website, improving its discoverability and effectiveness a hundred-fold. But what exactly is SEO and how does it work?
How to Add Media and Functionality to Your WordPress Blog
When you think about blogging you probably think about writing something, but a good blog can be about so much more. Images, videos, social media, and other functionality can support your posts and more deeply engage your readers. And the great thing about the WordPress content management system is that it makes adding these elements a snap. Let's look at some examples of the more common functionalities you might be interested in adding to your blog.
5 Options (Beyond Content and SEO) for Driving Website Traffic
Designing and building a great website is never enough. You also have to make sure people are aware of your site, want to go there, and, once there, want to stay or come back later. There are many ways you can drive traffic to a website. Good content and search engine optimization (SEO) are 2 ways that account for driving a majority of traffic to most sites, But let’s look beyond these efforts to 5 other opportunities.
An Introduction to Responsive Web Design
As the mobile revolution developed over the last decade, designers and programmers suddenly had to worry about supporting an ever-increasing list of devices and screen sizes. At first, the solution seemed to be to design unique experiences for each, but a leading school of thought has become designing one site to rule them all, or responsive web design. This creates a seamless cross-device user experience and future-proofs designs.
5 Ways to Optimize Images for Web
Users always have a need for speed. Think about it. Have you ever thought, “I wish this webpage would load slower?” And it’s not just because technological advances have skewed our expectations in favor of the fast lane. We rely on the internet more now than ever to provide basic information and services. But economic inequality or geography means users are accessing these on devices and networks with a wide spectrum of speeds. To build webpages to perform as identically as possible in all conditions is to show care and consideration for all users. One of the biggest impacts you can make on load speed is optimizing your images.
Communicating More Clearly with HTML5 Semantics
Semantics is the study of the meaning of words and in computer language making something semantic means using terms that both humans and machines can discern the meaning of. If you look at any chunk of HTML, you can easily identify terms that have no immediate meaning outside the language. HTML semantic tags more clearly describe the content within them, making webpages more accessible.
HTML Basics for Web Development
If you want to start learning how to build websites or web apps the most basic thing you need to understand is that HTML is the standard language of the internet. Learn about the structure of this language and the process from writing your first HTML document to using it to make a webpage come alive online.
Web Development: Hand Code or CMS?
Building a website is not just about deciding how it’s going to look, how it’s going to function, or what content it’s going to contain. You also have to decide how you’re actually going to build it. When building a website, you have 2 general directions you can choose from: hand code or use a content management system (CMS). There are pros and cons to both directions so one is not necessarily better than the other. You must evaluate your situation and decide which one works best for your needs.
Web Design Essentials: Color Palettes
A key component in your website’s feel, and some might argue the most readily noticeable, is color. We all have a favorite and before we can even read, we’re taught names and cultural associations for each. But choosing a color palette for a website that inspires the right emotions and works well with existing branding or content can be a challenge.
Web Design Essentials: Mood Boards
You should design your website to evoke the emotions that you want users to have, ones that make them have a positive opinion of your brand or content, and that motivate them to take actions you desire. Mood boards help with that. Mood boards are physical or digital collages of images, icons, typography, colors, patterns, textures, and other design elements that together speak to the intended mood you want to set with your visual design.
Web Design Essentials: Wireframes
Like architectural blueprints, wireframes depict the structure of a webpage but not the visual design elements of it. You can learn the layout of content blocks on a page, the types of content a page will contain, and some of the basic functionalities of a page from a wireframe.
Web Design Essentials: Sitemaps
Designing the bones of a website is the focus of an area of UX design known as information architecture (IA) design. IA design is about creating a structure on a website that helps a user understand where they are in the site and where they can find the information they are seeking. Information architecture is visually represented using a sitemap.
8 Usability Musts for Good Web Design
Users’ attention spans are short. They make judgments they may not even consciously realize about websites in seconds. Every element of a website’s design works in coordination to sway those judgments negatively or positively. There’s an overwhelming list of elements to consider for web design, but to be helpful I’ve highlighted the following 8 design areas I think are important to offer a good user experience.
Redesigning A WordPress Blog
Websites are like living creatures. We’re constantly interacting with them, updating them with new content, and making technological and design advances that shape our expectations of them. Knowing when it's time then to redesign a website can be tricky. Learn how I identified what needed updates on my WordPress blog one year after starting it.
Getting Real with High-Fidelity Prototypes
There comes a time in every project when an idea transitions from conceptual to actual. In website and app design that time generally comes during the prototyping process. Prototyping can be done in a range of fidelities, or levels of detail, from low to high. Low-fidelity prototypes can be a great tool for quickly iterating design ideas and starting usability testing early in your design process, but the type of experience they offer is quite removed from a product’s endgame. High-fidelity prototyping is when things start to feel and look real.