Best ux practice for preparing large files for download
Avoid creating dead end pages on websites. They cause confusion and create additional work for users. Use common website patterns and interfaces; don't make users learn something new.
Users will scroll down the webpage as long as it is clear that additional, relevant information is below the fold. Your website should always provide a strong visual indication of the direction of scrolling and whether more content is available. The longer the website page, the less likely someone is to scroll down to the bottom.
Design for color blind users. Convert your designs to grayscale to ensure all users can read important info. Don't use the color blue for any text on websites other than links. Be aware of the contrast on mobile websites. Screen glare can render your website unusable.
Reserve one color for CTAs on your website and don't use it for anything else. Warm, bright colors come forward and cold, dark colors stay in the background.
Make sure website users can complete their primary goal quickly and easily. What matters the most to users is that your website feels fast even if it is just their perception. Perception of website speed is based on load time, load behavior, waiting times and smoothness of animations. Website text should load before images so users can start reading before the rest of the site loads.
Delays longer than several seconds will often make users leave the website. Mobile interface elements are hard to tap accurately if they are small or close together. The minimum size for a touch target on mobiles should be 1cm x 1cm with proper padding. Someone using a pinky finger on your mobile website or app means that the interface targets are too small. When holding a tablet, the sides and bottom of the screen are most easily reached with the thumb.
Don't require vertical swiping for anything other than normal webpage scrolling. Don't use double-taps on mobile devices. Make sure users can interact with a single touch. Determine whether users will use devices with one hand or two when designing mobile layouts. Always have an obvious way to access the navigation menu on your website. If your website hierarchy is greater than levels deep, it's time to redesign. Consider using sticky menus, especially on longer webpages or when quick access is needed.
Good website navigation is not in the way, it disappears into the background. Make your navigation consistent; it shouldn't change throughout the website. Make navigation labels specific, no more than words and start with the most information carrying word.
Let users know where they are on the website by using breadcrumbs. Mobile navigation: Show the most frequently used options and hide the others under a hamburger menu. Hamburger menus on desktops are less noticeable, less familiar, increase interaction cost and diminish information scent. For secondary navigation on mobiles, use category landing pages, submenus or in-page menus.
Menu dropdowns should be vertical, not horizontal hover; it is much harder to scroll horizontally. If using megamenus, organize links into groups and distinguish between clickable and non-clickable items. Don't hide login or search features inside website menus. Align form labels and fields in a single vertical line to allow for fast scanning.
Field labels should be outside the text field, not inside, so users do not lose track of them. Split up sections with separators to make long web forms more user-friendly. Put form errors next to the error-causing fields on all web forms.
Error messages should be helpful, usable, concise and easy to understand. Links should always look like links. A user shouldn't have to click on a link to figure out where it leads. The link text should tell them. A reference to a full URL anywhere on a website should always link to that page. Certain elements, such as product images or reviews, are always expected to be clickable. Use a different color for visited links on websites to reduce users' memory load.
Buttons on websites must look clickable and have enough space for users to click or tap comfortably. Frequent actions on websites or apps should be large buttons, placed in easily reachable zones. Background colors, borders and action-oriented labels on a website signal to users that an element is clickable. For flat designs, make sure that action buttons are done in a contrasting color with an action-oriented label.
A website should have a visual cue that a button click was successful within 0. Buttons that change or delete data on mobiles should require more effort to tap to prevent accidental tapping. Unless you have a very small website with little content, always have a search field.
The search field should always look like a text box on a desktop. The search icon is OK to use for mobile. Make the search field easy to find. Users typically look for it in the top right corner. When looking for search on websites, users typically look for a "little box to type in".
Search fields on websites should be wide enough to see the entire search query. Avoid carousels: each new slide erases the memory of the previous slide.
Users can focus on only one thing at a time. Dots on carousels are difficult to see on mobile websites. Use images peeking from the left and right instead.
Instead of carousel navigation arrows, use descriptive labels so users know what to expect on the next slide. Website carousels that slide automatically should switch to manual once users interact with them. Use accordions to compress lengthy content on mobile websites.
When using accordions, offer a way to collapse any exposed content once the user has expanded it. Pros of using accordions on mobile websites: Shorter pages are easier to use than in-page jump links. Cons of using accordions on mobile websites: Increased interaction cost; out of sight is out of mind. The main purpose of each webpage should be obvious to the user. Users are reluctant to use Help on your website.
Put it in context and offer wizards and FAQs when appropriate. Display hints on websites and apps in context and only when needed. Help and instructions should be short and visually different from other interface elements. Only present one hint at a time on websites and mobile apps. This reduces memory burden. Icons must visually describe their function and purpose. Make them simple, familiar and meaningful.
Icons should only be used when necessary. Avoid overusing them and do not use them simply for decoration. The most important information on your webpage should always stand out as the most visually prominent. Put key information first. Users start at the top left and the first words are scanned the most.
Place high-priority content at the top of the website page. Use analytics to determine priorities on different devices. Use color and size contrast on your website to differentiate primary information from supporting details.
Priorities, such as context, location, and emergency information, are more important for mobile users. Priorities for mobile: Location, events, phone number, emergency info, time-sensitive info and info needed on-the-go. Simple, obvious terms are better than industry jargon or trendy terms for website navigation. Most users scan first and read later. Use visual variety and meaningful text to make scanning easier.
Readability isn't just about whether you can read something - it's also about whether you want to read it. Use increased line spacing between bulleted lists, numbered lists, lines and paragraphs to increase readability. When choosing a website font, consider its legibility, readability, weights and styles. On mobile websites and apps, consider making a font's x-height larger to improve its readability.
Avoid small fonts on all devices, especially for long form copy. Do not use condensed fonts in body text. Make sure that the text size for headlines on a mobile website is as responsive as the rest of the content. Writing the copy of the UI design is both an art and a science. UX writing requires thoughtful attention to the context and the audience. The text should be useful for the user—it should help people get where they want to go.
UX writing exists in the context of digital products, and it has unique constraints. Both the size of the screen and the way people comprehend the information on a digital space people scan, not read affect the copy.
As a result, copy should be concise and yet communicate the meaning effectively. When we are writing concisely, we look at our message and make sure every word on the screen has its job. All you have to do is cross out the wrong words. UX writing needs to be accessible to users with different abilities so that everyone can have a great experience.
Try to write for all reading levels. Replace such terms with simple words. They read the first line, the second line, then start skipping down the page while catching only the first or second word of each sentence.
Also, avoid long blocks of text. Provide text in chunks—easily scannable segments of text that focus on a limited number of concepts at a time. Your copy can be broken up into bulleted lists or you can have each sentence be a max of 80 characters. Just like this article is divided into sections and paragraphs, the long copy on your website or app should have a similar structure. The principles of progressive disclosure work well for UX writing.
Copy should be internationalized across linguistic, geographical, and cultural boundaries. The text should be understandable by anyone regardless of their culture or language. Humor can humanize the product. But similar to any other component of UI, humor should be designed. People are likely to read the text in your interface many times, and what might seem funny at first can become irritating over time especially if you choose to use humor in error messages.
The terms we use when describing the interaction with a desktop app do not necessarily work on mobile platforms.
Good UX writing not only makes interfaces more usable but it also builds trust. But in order to build trust, the copy must embody the voice of the organization. UX writers think how the language they choose to use will fit into the voice of the product and brand as a whole. What tone of voice is most likely to resonate with their user.
All parts of your products should give users a feeling that they were written by the same person, even though many different people prepared the copy. One typical example of inconsistency is replacing a word with a synonym in a different part of the UI. Human beings are incredibly visual creatures. An ability to interpret visual information is hard-wired into our brains. In some contexts, it might be hard or nearly impossible to describe something using only words.
It supplements the copy and provides additional information. Below is an example that helps users find specific information. The design industry needs people who are intuitively good at anticipating what words are needed and when. And as we see deeper integration with technology in our daily lives, the need for UX writers will only increase.
You may be surprised at the time and effort it takes to write effective UI text. Every word in your product is part of a conversation with your users. Lindsay is a social strategist at Adobe, focused on XD.
0コメント