A comprehensive guide to Web design

A Comprehensive Guide To Web Design

Nick Babich

The Nuggets translation Project

Permanent link to this article: github.com/xitu/gold-m…

Translator: horizon13th

Proofread by: Pot-code

Abstract

Website design is often a tricky issue. When designing a website, designers and developers often need to consider many factors, from visual presentation (how the page looks) to functional design (how the site works). In order to detail the task of designing a website, we present this article to our readers.

This article will focus on the design theme, design inspiration, design methods, for your website to create a better user experience. We started with the big picture, such as the user journey (how to define the “skeleton” of the site), down to a single page (what web design considerations should be). Other design elements, such as mobile support and testing, will also be mentioned.

Designing The User Journey

Information Architecture

The term “information Architecture” (IA) is often misused to refer to the directory structure of a web site. This is not true. Although web menus are part of the information architecture, they are only one aspect.

Information architecture refers to organizing information in a clear and logical way. The result follows one goal: to help users navigate through complex information sets. Good information architecture provides a hierarchical structure consistent with user expectations. However, excellent hierarchy and intuitive navigation are not accidental, but the result of user research and user testing.

There are many ways to investigate user needs. In general, information architecture is used for user research (e.g., user interviews, card classifications) : researchers listen to user expectations and observe how potential users categorize complex sets of information. The information architecture also needs the results of usability tests to see if users can navigate easily.

Card taxonomy is a simple exercise designed to help designers figure out how best to organize content into categories based on user input. Information architecture is similar to card taxonomy in that it typically presents clear patterns. (Photo by FosterMilo)

In front of the web design community, there are often routine steps: designers design navigation structures based on user interviews, use card classification to test whether the structure conforms to the user’s thinking model, and user experience researchers use “tree testing” to verify navigation structures.

Tree tests can reliably verify that users can navigate based on existing directory structures. (Credit: Nielsen Norman Group) (Click for a larger image)

Global Navigation Global Navigation

Navigation is the cornerstone of usability. No matter how good the site is, it doesn’t matter if the user has difficulty locating himself or her in the site. Site navigation design should follow the following principles:

Easy navigation should be designed in such a way that visitors get to their destination with as few clicks as possible.
Clarity Users do not have to guess the meaning of navigation options, each menu item is self-explanatory to the visitor.
Consistency Navigation must be uniform across all pages of the site.

Consider the following points when designing navigation:

Select a navigation mode based on user requirements The navigation design must comply with the requirements of mainstream users. Your target audience expects a certain type of site interaction, so do it in your own way. For example, if most users don’t know what a hamburger icon means, avoid using it to display navigation.
Prioritizing navigation options There is a simple way to prioritize navigation options: Sort user action tasks by priority (advanced, intermediate, low), and highlight the high-priority user action paths in the layout, along with the nodes that are frequently accessed.
As Jakob Nielsen says, it’s easier to recognize something than to recall it. To reduce the user’s memory burden, make all important menu items always visible. These most important menu items should always be available, not just when we expect users to want them.
Conveying current location information “Where am I?” is the most basic question users need to answer for effective navigation. Many web sites make the common mistake of not showing the user’s current location, so the question of how to locate it is worth exploring.

Links and Navigation Options Links and menu items

Links and menu items are elements in the navigation process and directly affect the user’s journey. These interactive elements follow the following rules:

Users expect different interactions between internal links and external links. All internal links should be opened in the current TAB so that the user can use the Back button in the current window. If you decide to open external links in a new window, you should alert the user before automatically opening a new TAB/window. This may require a declaration (opened in a new window) to be added as text to the link text.
If visited links do not change the color markup, users are likely to inadvertently repeat visits.

Users can use color tags to identify previously accessed pages to avoid repeated visits to the same page.

Checking all links can be extremely frustrating when a user clicks on a link and returns a 404 error. When viewing content, visitors expect all links to point to the link, not to other unrelated pages, and do not tolerate 404 pages.

Back Button In Browser Indicates the Back Button of the Browser

The back button is the second most important interface control on the browser (after the URL bar), and make sure it works as expected. When users follow a link to a page and click the “Back” button, they expect to return to exactly where they left off on the previous page. In particular, avoid hitting the “Back” button and ending up at the top of the page. Losing the user’s original focus forces the user to revisit the read content. Users quickly lose patience because they don’t exactly “back” into place.

Breadcrumbs navigate

Breadcrumb navigation is a collection of links that index the current location of a web site. It is a secondary location rule that is often used to show the user’s current location on a site.

While this element doesn’t need much explanation, a few points are worth noting:

Do not use breadcrumbs as an alternative to the main navigation. The main navigation is the guiding element, while breadcrumbs are the supporting element. Using breadcrumbs as the main navigation rather than other elements usually means poor navigation design.
Use arrows as separators instead of slashes. Clear separation of navigation hierarchies is recommended with the greater-than sign (>) or right arrow (→) because such symbols contain direction information. It is not recommended to use the left slash (/) as a separator in e-commerce sites. If you must, make sure the product category does not include a slash.

The hierarchy of the crumbs is almost indistinguishable (click to see larger image)

Search Search bar

Some users visit a site for a specific purpose, and they don’t want to use navigation. At this point, users just want to type text into the search bar, submit a search query, and return to the page they are looking for.

Consider the following basic rules when designing your search bar:

The chart below is based on A study by A. Dawn Shaikh and Keisi Lenz that surveyed 142 participants to map their expectations for the search bar. The study found that the best placement for the search bar was at the top left and right corners of a website. This makes it easier for users to find the search bar in an “F- “browsing mode.

Highlight search on rich text Sites. If search is an important feature of your site, highlight it, because it can be the fastest path for users to explore.
It is a common mistake for designers to design input fields that are too narrow. True, the user can type long text in the short text box, but only part of the text can be displayed at a time. This is bad design because the entire query cannot be displayed at the same time. In fact, when the search bar is short, users are forced to use short, fuzzy queries because the search criteria are too long to see. Nielsen Norman Group recommends 27-character input boxes for 90% of queries.

The advantage of placing a search bar on all pages is that when users can’t locate what they want to see, they try the search function, no matter where they are on the page at the time.

Designing Individual Pages

Content Strategy Content Strategy

Content strategy focuses on the design of page objects. Understand the page target and draw the page according to the target location.

We propose the following practical tips for improving page content comprehension:

Avoiding information Overload Information overload is a serious problem that hinders user interaction and decision-making because users feel overwhelmed by the amount of information. There are some simple ways to reduce information overload. The most common approach is the chunking algorithm — breaking up content into smaller chunks that help users better understand the process. Checkout forms are a good example. Display up to five to seven input fields at any one time, break down the entire checkout process into different pages, and gradually display fields as needed.

(Image credit: Witteia) (Click for a larger version)

Avoid obscure words and technical terms any obscure term on a page can increase the cognitive load of the user. The safest strategy is to target the audience at all stages, choosing words that are clear and easy to understand to suit different groups of users.
For information overload, try to avoid long paragraphs unless your site is geared toward content consumption. For example, if you want to write an introduction to a service or product, try to take it one step at a time and develop the details slowly. Use short, visual modules to allow the user to explore step by step. According to Robert Gunning’s See Through Business Review Writing, a sentence should be no more than 20 words.

(Photo: The Daily Rind)

Avoid capitalizing all letters in English. This applies only to short words such as abbreviations or logos. Avoid using all caps for long words: paragraphs, table notes, error messages, notification messages, etc. As Miles Tinker’s Readability of Typefaces points out, all capital letters slow down reading speed dramatically, and most readers find all capital letters less readable.

English in all caps makes reading difficult.

Page Structure Page Structure

A properly structured page makes the elements of the user interface layout clear. While there is no universal size standard that applies to all scenarios, following the following guidelines helps to design a sound page structure:

Design in line with user expectations, consider similar types of sites, what elements they use and where they are placed. Try to use visual patterns that are familiar to your target audience.
Using grid layout A grid layout divides the page into several main blocks, defining the relationships between elements based on their size and location. Using a grid layout, you can easily combine many elements into a highly cohesive layout.

Grids and layout systems are a tradition in the design world, and Adobe XD’s grid layout helps design scripts work consistently across multiple screen sizes, customizing the grid system to adjust the proportions between elements.

Use low-fidelity wireframes to avoid clutter and clutter that overload the interface. Each new button, image, and even text adds complexity to the page. Before building a page with real elements, draw a simple wireframe prototype and analyze it, removing all non-essential elements.

Low-fidelity prototype with Adobe XD (Image credit: Tim Hykes) (click to see larger version)

Visual Hierarchy Visual Hierarchy

People often prefer to skim through pages rather than savor every detail. As a result, when visitors want to find content or complete a task, they often scan the page to find the target. At this point, the designer does the user a huge favor by presenting the visual hierarchy well. The visual hierarchy refers specifically to the way in which elements are presented to show their importance. In simple terms, users should look where they first look and where they second look. A good visual hierarchy makes page browsing easier.

As designers, there are many ways we can manipulate the focus of a user’s browsing page. To set the right browsing path for the visitor’s eye movements, we can follow two types of instinctive browsing layouts: “F-shape” and “Z-shape”. For rich text pages, such as articles and search results, the “F-shaped” layout works better. A “Z-shape” layout is better for non-text pages.

The “F-shaped” layout used by CNN (click for a larger image)

The “Z-shaped” layout used by Basecamp (click to see larger version)

Important elements Visual prioritizes the page title, login form, navigation bar, and other important content for the user to use.

The Learn More About Brains button in the picture highlights attractive user behavior, highlighted. (Click for larger version)

Mockup helps designers look through a layout and see what a page might look like if it is filled with real data. Also, it’s much easier to rearrange elements in a prototype than it is to rearrange them during development.

Design prototypes using Adobe XD. (Image credit: Coursetro) (Click for larger version)

Scrolling Behavior

Many web designers have a persistent misconception that users can’t use scrollbars. I’ll say it again: nowadays, everyone uses scrollbars!

There are several ways to improve the scrolling experience:

Encourage user scrolling behaviorEven though the user actually starts when the page loadsScroll wheelThe content at the top of the page is also important. The content at the top defines the user’s impression and expectations of the site. Users do pull down the scrollbar, but only when unhidden content is compelling enough. Therefore, remember to put the most eye-catching content at the top of the page:
- Present a good site introduction. A good site profile creates a good content scene that answers the initial question “What is this site for?”
- Users of engaging images are particularly interested in relevant images.
When you need to build a long page, remember that the user needs to have a sense of orientation (current location) and a sense of direction (access to other paths). Long pages make it difficult for users to locate. When the page is deep, if the top navigation disappears while sliding down, the user must keep swiping up to get back to the top. Obviously, sticky navigation bars can both show the current location and keep the screen consistent for a long time.

Sticky navigation bar triggered by scrolling (Photo: Zenman)

Provide visual feedback when loading new content visual feedback is extremely important when a web page is loading dynamically (such as news streams). Since scrolling requires content to load quickly (no more than 10 seconds), you can use loading animation to indicate that the system is processing.

Detailed animations (e.g., Tumblr’s loading prompts) tell the user that more content is loading.

Kidnapping scrolling is the most annoying thing of all, because it takes control away from the user and makes scrolling unpredictable. Design your site so that users have active control over browsing and scrolling.

Tumbler’s sign-up page kidnaps users’ scrollbars (click to see larger image)

Content Loading Loading Content

You have to load it up and say a few more words to make it clear. While immediate response is best, in some cases your site may need more time to deliver content to visitors. Poor network connectivity can slow down response times, or some operations may take more time to complete. But whatever the cause of the behavior, the site must appear responsive.

The attention span and patience of site visitors are low. According to research by Nielsen Norman Group, 10 seconds is about the limit for users to focus on the same task. Visitors get frustrated when they have to wait for the site to load, and if the response time is not fast enough they are likely to close the window and leave.
Many web sites use a progress bar to show data loading progress. The motivation behind the progress bar is good (to provide visual feedback), but sometimes it backfires. As Luke Wroblewski notes, “A progress bar, by definition, is a reminder of the truth: Wait for me. It’s like watching a clock tick down — time passes more slowly when you wait. The progress bar has a great alternative: the page frame. These containers are essentially temporary versions of blank pages on the site, into which information can be gradually loaded. By using a page frame instead of a progress bar, the designer can focus the user’s attention on the actual page loading and build the user’s mental expectations for the page that will load later. And this creates the illusion that events are happening quickly. Because information loads and displays gradually, the user can feel that the page is being processed and displayed step by step while waiting.

Facebook uses the skeleton of the site, where content loads progressively as pages are filled. (Click for larger version)

Buttons button

Buttons are crucial in creating a smooth interactive experience. The following points are worth noting in the basic practice:

When making sure that clickable elements look clickable to use buttons and other interactive elements, consider how the design communicates usability information. How do users interpret design elements as buttons? A form should do the following: The representation of an object reflects how it is used. Visual elements that look like links or buttons but are not actually clickable (e.g., underlined text that is not a link, square button shapes that are not clickable) can be confusing to users.

Is the orange box in the upper left corner a button? No, but the shape and label make it look like a button. (Click for larger version)

An interface element that a button can interact with should be named in accordance with its actual purpose to meet user expectations. When the user knows what the button does, it will be more comfortable to use. Vague labels such as “submit” or abstract labels such as the one in the example below do not provide effective information for the user to interact with.

Don’t confuse users with interface elements. (Photo: UX Matters)

Whether subconsciously or not, users will remember the details of the site. When browsing websites, they associate certain shapes and features. Therefore, consistency not only contributes to aesthetic design, but also enhances user familiarity. The chart below perfectly illustrates this point. Using three different shapes in the same module of the application (such as the system toolbar) is not only confusing to the user, it also looks unprofessional.

consistent

Imagery visualization

As the saying goes, a picture is worth a thousand words. Humans are visual animals, able to process visual information almost instantaneously. Ninety percent of what we perceive is visually transmitted to the brain. Images are the most powerful way to capture a user’s attention and differentiate a product. A picture can convey more information to the reader than a well-crafted piece of text. What’s more, images can cross language barriers and express things that words can’t.

The following principles can help you incorporate graphics into your website design:

Ensure that the image correlation design is most afraid of transmitting the wrong information of the image. Choose the image that best fits your product’s goals and make sure it’s contextual.

Irrelevant images cause user confusion (click to see larger image)

Using faces in your design is an effective way to engage users. Seeing faces makes users feel connected to them, rather than just selling products. However, the fact that many corporate websites use generic photos to build trust is terrible. Usability tests show that such photos hardly add value to the design, and instead make the user experience worse.

Unreal images give users a sense of hypocrisy. (Click for larger version)

The quality of a website’s use of resources has a great impact on users’ impressions and expectations of service. Make sure the image size is proportional on all platforms. Images cannot be pixelated, so test devices of all scales and resolutions. Displays the image in its original aspect ratio.

Low quality photos VS high quality images without losing focus (Image: Adobe) (click for a larger image)

Video Video

As Internet speeds rise, video is becoming more popular, especially because it keeps users on the Internet longer. Video is everywhere these days: PC, tablet, mobile. When video is used effectively, it is the most effective way to engage users — video delivers more emotion and more attention to the user’s product and service experience.

Set video to mute by default, users can choose to turn on the volume when the user visits a page, there is no expected sound. And most users don’t use headphones, so they’re nervous to turn the sound off quickly. Even in most cases, shut down the site at the first sound.

Facebook videos play automatically when a user visits them and are muted by default unless the user actively turns on the sound. (Click for larger version)

Shorter AD videos are better According to research by D-Mak Productions, short videos are more appealing to most users. Therefore, it is best to keep commercial videos in the two – to three-minute range.

(Image by Dmakproductions)

If video is the only way to consume content, it will be limited to users who don’t understand it and don’t understand it. It is recommended to provide subtitles and complete video text version as auxiliary options.

Subtitles make video content more accessible to users. (Credit: TED) (Click for a larger version)

Call-to-action Buttons CTA Buttons

Calls to Action (CTA) are buttons that direct users to conversion rates. CTA focuses on guiding users to perform the desired behavior. Common CTA examples are:

Start the trial
Download and view now
Register now for the latest information
Began to consulting

Consider the following when designing CTA buttons:

Size CTA buttons should be large enough to be visible from a distance; But not so big that it distracts users from other content. To confirm that the CTA button is the most prominent element on a page, try the five-second test: Browse for five seconds, then note down what you remember. If you have CTA written down, it’s the right size
The color of the Visual First CTA button greatly affects the user’s attention. You can make some buttons stand out more than others by adding color to the visual impact. Contrasting colors are ideal for CTA, making them stand out.

The green CTA button on the Firefox page stands out and catches the user’s eye. (Click for larger version)

It is also important to compare the size of the space around the CTA button. White (or contrasting) Spaces create white areas for buttons that separate them from the rest of the interface.

The old Dropbox homepage is a good example of using contrast Spaces to highlight CTA. The dark blue “Sign up for Free” CTA button contrasts with the light blue background. (Click for larger version)

Behavior based copywriting Write copywriting that draws users to action. Start with a verb like “start,” “get,” or “join.”

Evernote’s CTA, while common, is also the most effective at conveying action. (Click for larger version)

Tip: You can quickly test CTA with blur effects. The blur test is the easiest way to determine if a user’s eyes are going to be where they want them to be. Apply the blur effect to the screenshot of the web page in Adobe XD (see the example below). Look at the blurry version of the page. Which elements are highlighted? If this is not what you want, modify it again.

Blur testing is a technique that examines design focus and visual hierarchy. ([click to view a larger version] (HTTP: / / https://www.smashingmagazine.com/wp-content/uploads/2017/11/02-A-Comprehensive-Guide-to-Web-Design-large-opt.p ng))

Web Forms

Form filling is one of the most important types of interaction on the web. In fact, forms are often thought of as the last step in achieving your goals. Make sure users can fill out forms quickly and without questions. A form is like a dialog box: there should be a logical communication between the user and the site.

Ask only what you have to ask. Ask only what the user really needs to fill in. Any extra field on the form can affect conversion rates. Figure out why you need the information and how you will use it each time.
The questions on the form should be logical from the user’s point of view. For example, it is illogical to fill in the address before the name.
Consolidate related fields To consolidate related field information into the same logical unit. The flow from one set of questions to the next is more like a conversation. Grouping related fields together makes it easier for users to understand information.

Putting related fields together (Image credit: Nielsen Norman Group)

Animation Animation

More and more designers are advocating animation as a function to improve the user experience. Animation is no longer just for fun, it is one of the most important tools for improving interaction efficiency. However, animation can only improve the user experience in the right time and context. Good interactive animation has a goal: it is meaningful and functional.

Here are some scenarios where animation improves the user experience:

Visual feedback on user behavior Good interaction design provides visual feedback. Visual feedback is very useful when you need to inform users of the results of your actions. Animations provide easy feedback to the user if the action fails. For example, a shake effect can be used if a password is entered incorrectly. This makes sense. The shake effect, as a common body posture, generally means “no” in interpersonal communication.

After The user sees The animation, he can understand The problem in seconds.

Visibility of System State Among Jakob Nielsen’s Ten heuristic usability, visibility of system state is one of the most important principles of user interface design. Users want to know where they are all the time, they can’t keep guessing — apps should tell users where they are with appropriate visual feedback. Data upload and download operations are common scenarios for functional animation. For example, the loading animation shows the progress of the task, the speed of processing, and sets the possible speed of subsequent processing in the user’s mind.

(Photo: XJW)

Navigational animation refers to switching between states on a website — for example, from an overview view to a detailed view. State switching often involves changing a large area of scenes, and sometimes it is hard for users to keep up. Functional animation simplifies the user’s adaptation to the scene transition process, smooths the transition between scenes, and highlights the changes by inserting visual connections into the scene’s state changes.

(Image credit: Ramotion)

Let’s say you have a dozen websites that do the same thing, helping people do the same thing. They all provide a good user experience, but it’s not just a good user experience that users like most. Websites should have an emotional connection with their users. At this point brand animation plays a decisive role in attracting users. It will create brand value for the company, highlight the advantages of the product, and make users truly happy and memorable.

(Photo by Heco)

Mobile support

Today, nearly 50 percent of users access the web from mobile devices. What does this mean for web designers? This meant that every page we designed had to support mobile.

Responsive Web design

Optimize your site for different desktop and mobile browsers, each with different screen resolutions, support and user bases.

Single-column layouts Target Single-column layouts generally work well on mobile devices. The single-column layout not only works well with the limited space of a small screen, but also scales on devices with different resolutions and in vertical and horizontal mode.
Priority+ is a term coined by Michael Scharnagl to describe a navigation bar that displays important navigation options and hides secondary navigation options in the “More” button. This mode takes full advantage of the available screen space. When the screen stretches, navigation options increase, increasing the visibility and engagement of the site. This model is particularly effective for multi-module, content-rich sites (such as news sites, large e-commerce sites). In the legend, The Guardian uses Priority+ mode for module navigation. The secondary option is only displayed when the user clicks the “All” button.

The Guardian uses Priority+ mode for module navigation.

Making sure images fit across multiple devices Sites must fit perfectly across all devices, with different screen resolutions, pixel density, and placement orientation. One of the main challenges for designers building responsive websites is the management and presentation of images. To simplify this task, you can use tools such as the reactive picture breakpoint generator to process images.

Responsive picture breakpoint generator can manage and adapt multi-size pictures and dynamically generate responsive picture breakpoints. (Click for larger version)

From mouse clicks to gestures

Mobile web interaction is done with a finger, not a mouse click. This means different rules for designing touch objects and interactions.

All interaction elements (links, buttons, menus) should be clickable with gestures. The interaction area (clickable area) of PC web pages is small and precise, while mobile web pages require larger and wider buttons to facilitate finger interaction. If your site requires a lot of gesture input, consult the MIT Touch Lab research to choose the appropriate size for your buttons. The study found that the average finger surface size was between 10 and 14 mm, and the average finger tip size was between 8 and 10 mm, with 10 × 10 mm being the appropriate contact size.

Small buttons are harder to click than big ones (Photo: Apple)

Interaction requires stronger visual markup on the mobile end of the web, there is no hover. On the PC side, users can hover over elements for additional visual feedback, such as hovering to expand drop-down menus. Mobile users have to click to get feedback. Therefore, users should be able to correctly predict the behavior of page elements by observing them.

Accessibility design

Today’s products must be designed to be used by everyone, regardless of the user’s handicap. Designing for people with disabilities is actually another way for designers to cultivate empathy and try to experience the world from someone else’s perspective.

Users With Poor Eyesight

Many web sites use low contrast text. While low-contrast text may be trendy, it’s also harder to read and read. Low-contrast content makes reading difficult for users with low vision and contrast sensitivity,

Grey text is difficult to read against a light grey background. It doesn’t matter how good the design is when the experience is bad. (Click for larger version)

Low-contrast text is hard to read on a PC, and even harder on mobile. Imagine you’re walking in the sun, trying to read low-contrast text. This reminds us that accessible visual design is better for all users.

Never sacrifice usability for aesthetics. The most important feature of text and other visual elements on a website is readability. Readability requires sufficient contrast between the text and the background. To ensure that visually impaired people can read, the W3C Web Content Accessibility Design Guidelines (WCAG) recommend contrast. It is recommended to use the following contrast for text and image text:

Text with small font size should have at least 4.5:1 contrast against the background, with an optimal 7:1 contrast.
Text with large font size (18 point font, 14 point bold and above) should have at least 3:1 contrast against the background.

Poor example: These lines do not match the recommended color contrast and are difficult to read against this background.

Good example: These lines match the color recommended contrast and are legible against the background.

You can use WebAIM’s color contrast detection to quickly tell if you’re in the best visual range.

(Click for larger version)

Color Blind Users Color Blind Users

An estimated 4.5% of the world’s population is colour blind (1 in 12 males and 1 in 200 females). 4% of the population have low vision (1 in 30) and 0.6% are blind (1 in 188). It’s easy to overlook designing for these audiences, because most designers don’t experience this problem.

To keep these users accessible, avoid using color dimensions to convey content. As the W3C states, colors should not be used “as the only visual means of conveying information, specifying behavior, prompting responses, or distinguishing visual elements.

A common example is when a form uses color as the only way to communicate warnings. Success and error messages are shown in green and red, respectively. But red-green color blindness is the most common form of color blindness — for them these colors are hard to distinguish. You’ll often see error messages like “fields marked in red are required.” While this may not seem like a problem, it can be annoying to color-blind users. Colors should be used to highlight or complement visible information.

Bad example: This form only relies on red and green to indicate whether a field has an error. Color-blind users are unrecognizable.

In the above table, designers should give more specific prompts, such as “The email address you entered is invalid” or at least display ICONS where attention is needed.

Good example ICONS and text labels show which fields are invalid, better communicating the information to color-blind users.

Blind Users Blind Users

Photos and illustrations are an important part of the site’s user experience. But blind users need assistive technology such as screen readers to translate websites. Screen readers “read” images by labeling them with text. If there is no text or the description is not clear, they will have a hard time getting information as expected.

Consider two examples – one is Threadless, an e-commerce site for popular T-shirts. The page doesn’t have much information about what’s on sale; the only visible text is the price and size of the item.

(Click for larger version)

The second example is the ASOS website. The same web site that sells T-shirts, it provides accurate text for the product. This helps users with a screen reader imagine what the product will look like.

When creating explanatory text for images, follow these guidelines:

All “meaningful” images require descriptive alternative text. (” meaningful “pictures provide scenes for information transmission)
If the image is merely cosmetic and does not provide useful information to help the user understand the content of the page, the text description is not necessary.

Keyboard-Friendly Experience Keyboard stream user Experience

Some users use a keyboard instead of a mouse to navigate the site. For example, users with motor disabilities have trouble using fine-motor tools like a mouse. You can simplify interaction and web page positioning for such users by adapting interaction elements to the Tab key and displaying keyboard indicators. The basic rules of keyboard navigation are as follows:

Check whether keyboard indicators are visible Some web designers remove keyboard indicators because they are an eyesore. But this prevents keyboard users from interacting with the site properly. If you don’t like the default indicator provided by your browser, don’t delete it; It’s about designing to suit your taste.
Keyboard users should be able to access all interactive elements, not just the navigation bar and the main CTA buttons.

More detailed requirements for keyboard interaction can be found in the W3C’s Wai-ARIA authoring practice section “Design Patterns and Tools.”

Testing the test

Iterative Testing

Testing is an important step in the UX design flow. Like other steps in the design cycle, it is an iterative process, gathering feedback from early on and iterating throughout.

(Credit: Extreme Uncertainty) (Click to see larger version)

Test Page-loading Time Tests the web Page Loading Time

Users hate pages that load slowly, which is why response time is a key factor in modern websites. According to Nielsen Norman Group, there are three main response time boundaries:

A tenth of a second is a moment for the user.
One second is almost seamless for the user’s cognitive flow, but there is still a slight lag.
Ten seconds is almost the limit of the user’s attention span, and a ten-second delay usually forces the user to close the page immediately.

Obviously, we can’t make users wait 10 seconds for any transaction. But even a delay of a few seconds, which actually happens a lot, can degrade the user experience. Users get annoyed waiting for actions.

What causes slow loading in general?

Heavy content objects (such as embedded video or slide control)
Unoptimized backend code
Hardware issues (infrastructure not sufficient to support fast operations)

Tools such as PageSpeed Insights can help you find the cause of slow loading.

A/B Testing

A/B testing is useful when you are struggling with two versions of the design (such as an existing version and A redesigned version). This test involves randomly showing two versions to an equal number of users and then analyzing the data to see which version is more effective at achieving the goal.

(Image credit: VWO)

Developer Handoff

The UX design process consists of two important steps: prototyping work and solution development. The connection between the two steps may be called a handoff. When the design is in its final stages and ready for development, the designer prepares the design specification, which is a document description of the design implementation. The design specification ensures that the draft will be developed in accordance with the original intent.

If there is an imprecise design specification, the developer can either guess and do it during the site development phase or come back to the designer for answers. But filling out design specifications by hand can be a pain in the neck, and depending on the complexity of the design, it often takes a lot of time.

Adobe XD’s Design Specifications feature (beta) publishes publicly accessible urls for developers to examine workflows. Designers no longer have to spend a lot of time creating design specifications and communicating with programmers about element placement and font styles.

Design Specifications for Adobe XD (Beta)

conclusion

As with any aspect of design, the suggestions here are just the beginning. Incorporate these ideas into your practice for best results. Think of your site as a step-by-step project, using analytics and user feedback to improve the experience step by step. Remember: Design isn’t for the designer — it’s for the user.

This article is part of a UX design series sponsored by Adobe. Adobe XD tools are designed for fast, smooth UX design flow, helping you go from idea to prototype quickly. Design, prototype, share — just one app. Click on Adobe XD on Behance to see more creative work using Adobe XD. Sign up for the Adobe Experience Design Newsletter to receive the latest UX/UI design trends and inspiration.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.

directory