Thursday, April 27, 2017

Usability

To start. It is necessary to read the source. The rules, which I will write below - were created as far back as 2002, but they are actually relevant up to now. Pulling them out of the network was another task, as they are all used by SEO firms to promote their own sites to sell the promotion of other sites for money. So I decided that, at least for me, it would be very useful to keep these rules somewhere where I will know where to look for them if that. Well, you will come in handy!

In the second part of the blog - by tradition - what I actually had to initially write, though, as usual about their additions. Namely - examples of bad and good use of heuristics.

Jakob Nielsen - 110 rules of usability

1-10
  • ·         The name and / or logo of the company must be of a suitable size and be located in a conspicuous place (for example, in the upper left corner)
  • ·         Add to the page an advertising slogan that clearly characterized what exactly the company does
  • ·         Highlight the features of the site from the point of view of users, its differences from the main competitors
  • ·         Clearly highlight the primary tasks, so that hitting the main page, the visitor immediately knew where to start
  • ·         The site should have only one "official" home page
  • ·         Within the main site, the word site should not refer to anything else, except as a website in general
  • ·         The design of the home page should clearly distinguish it from other pages of the website
  • ·         Group information about the company, its investors, public relations, available job openings and other similar information in one place
  • ·         It is necessary to add a link to the "About Us" section, which contains information about the company and links to more detailed information about its products, services, investments, business proposals, the management team
  • ·         It is necessary to add a link "Contact Us", which points to the corresponding page with contact information about the company


11-20
  • ·         To write about the company in the media, add to the home page "Press releases" or "Company news"
  • ·         From the user's point of view, the website and company must be integrated into one
  • ·         If you support the feedback mechanism, clarify - who will read the received messages
  • ·         Do not post "internal" information on a public website
  • ·         If the website collects information about visitors, add a link to the home page "Legal Information" or "Confidentiality"
  • ·         Explain how the website "earns" money, if it is not obvious
  • ·         When choosing words, be guided by the language of users. The names of the sections must correspond to their purpose in terms of the user, not the company
  • ·         It is necessary to avoid excessive
  • ·         Do not use too clever phrases or advertising jargon that make understanding difficult
  • ·         Strictly monitor the use of capital letters and the observance of speech formatting


21-30
  • ·         Do not give the name of a clearly marked area of ​​the page, if its contents and so speaks for itself
  • ·         Avoid singleton lists and categories
  • ·         When formatting, use non-breaking spaces between words that, for semantic reasons, should be placed together in the same row. When formulating tasks for visitors, it is necessary to use only the imperative mood. This form of the verb can be softened if necessary
  • ·         Before using an abbreviation not found earlier in the text, initials or acronym, her / his should be decoded
  • ·         Avoid exclamation marks
  • ·         Less often use words, typed only in capital letters, or do not use them at all
  • ·         Do not insert extra spaces or punctuation marks where you do not need them
  • ·         Examples should disclose, and not just describe the content of the site
  • ·         Each example should be accompanied by a link to a detailed description of this product, not the category to which it belongs
  • ·         Next to the description of specific examples, you must place a link to the category as a whole


31-40
  • ·         Links to detailed information about a particular product should be different from the links to the category as a whole
  • ·         Take care to ensure easy access to all the elements that have been on the home page lately. To do this, create a list of recent changes, as well as permanent archives of the deleted content
  • ·         The names of links should be different from each other and be legible
  • ·         Do not use general instructions in the title of links "Click here"
  • ·         The link at the end of the list of elements should not be called an undefined name like "More:" or "More:"
  • ·         The colors of viewed and unreviewed links should be different
  • ·         In the title of a link or a group of links, do not use the very word "reference". To show that a given word or phrase is a link, underline it / her and highlight it in blue
  • ·         If the function of the link is different from an ordinary transition to another web page, this should be explicitly stated
  • ·         The main navigation bar should be in a prominent place on the page, preferably near its main part
  • ·         Group the navigation areas so that similar items are next to each other


41-50
  • ·         Do not create multiple navigation areas at once, the purpose of which repeats each other
  • ·         The home page should not contain an active link to itself
  • ·      Do not use the invented artificial words in the names of navigation elements. The category names should have their distinction - if users do not understand the fictitious terminology, they will not be able to distinguish between categories
  • ·         If the site provides a "shopping cart" for purchases, create a link to it on the home page
  • ·     Pictograms to designate navigation elements are used only in cases when they are able to quickly attract the attention of visitors to a certain class of objects
  • ·      The home page should contain a field for entering search queries, and not just a link to the search page
  • ·      Input fields must be long enough for the user to enter and edit a medium-sized query
  • ·      To the search area to the right of the field, add the "Search" button
  • ·      If the advanced search on the site is not carried out too often, the home page should provide a simple search, followed by a link to the advanced search page or advice on how to conduct it
  • ·        By default, the search should cover the entire site


51-60

  • Do not include the Internet search function in the site's search engine (except for portals)
  • The home page should provide direct access to the primary services of the site
  • Do not add to the site services that are not relevant to its main topic
  • Do not put on the site services that repeat standard browser functions, such as selecting a start page or creating a bookmark
  • Graphics should display the real content of the site, and not only serve as its decoration
  • Photographs and drawings must be signed if their meaning is not fully understood from the context of the article to which they are attached
  • Photos and diagrams should be edited in accordance with the main screen resolution
  • For drawings, the use of "watermarks"
  • Do not use animation just to draw attention to some element of the home page
  • Never expose the main elements of the page, such as the company logo, advertising slogan or main title


61-70

  • Allow the visitor to decide whether he wants to see an animated screensaver to the site - do not run it by default (refers to Flash-screensavers)
  • Limit the use of various font sets and other text formatting (sizes, colors)
  • Use high-contrast font colors and page backgrounds
  • Try to do without horizontal scrolling for the most common screen resolution
  • All the main elements of the home page should be above the fold line for the most common screen resolution
  • Use the "flexible" structure of the home page so that its size can automatically adapt to different screen resolutions
  • It is necessary to be extremely careful in the use of logos, in addition to the company's main logo
  • Never use interface elements if the user does not need to click on them
  • Do not get carried away using drop-down lists, especially if their elements require any explanation
  • Avoid the use of input fields, especially at the top of the page, where it is customary to post search tools


71-80

  • Title must begin with a word that carries a semantic load
  • Do not include the top level domain name in Title, unless it is part of the official name of the company
  • Do not include in the Title the phrase "home page"
  • Title should contain a brief description of the website
  • Title must consist of no more than seven or eight words and contain no more than 64 characters
  • Home pages of commercial companies should have an address like http: // www.company.com, complex codes or page names like index.html should not be used.
  • If the content of the website is closely tied to a specific country - the URL must contain the top-level domain of the country
  • It is necessary to register domain names containing alternative, abbreviated, as well as the most frequently used incorrect variants of spelling a company name
  • If the website has several alternative domain names, select one of them as "official" and redirect to it all visitors who have used other addresses
  • The headings of the articles should be concise, but at the same time descriptive, and convey maximum information with the minimum number of words


81-90

  • Create a summary for each article or press release mentioned on the home page
  • As a link to the full version of the article, you must use its title, not the subtitle
  • If all the news mentioned on the home page refers to the events of the last week, there is no need to specifically indicate the date and time in the subtitle of each of the articles. The only exception is really important news that can be updated several times a day
  • No spectacular screen savers and intermediate pages should not be
  • Max to refuse pop-up windows (PopUp)
  • Do not use "route pages" to select the geographical location of visitors (excluding several language versions and none is the main one)
  • Advertising banners of other companies should be carried out "on the periphery" of the page
  • Advertisements of "outside" companies should be small and discreet
  • If advertisements are placed outside the standard "banner area". In this case, they should be marked as advertising, so that visitors are not confused with the main content
  • Avoid generally accepted design techniques for advertising banners in the design of the main content of the website


91-100

  • The site should not have Greetings (in the literal sense of the word)
  • If the website is "unavailable" or if important site elements have stopped working, you should immediately report this on the main page
  • Beforehand to think over the plan of work with a node in case of extraordinary events
  • No need to spend space on expressing gratitude to the search engine, design studio, favorite brand of browser or technology used
  • Respect the restraint in the transfer of awards and titles
  • Do not automatically update the contents of the page (autorefresh)
  • In the process of updating the page, update only the content that has really changed
  • If any element of the home page is displayed taking into account the already known information about a particular visitor, you do not need to show its "general version" for new visitors
  • Do not offer users the means of setting the general interface of the page (choosing a color scheme)
  • Do not limit yourself to simple links to the registration form. Detailed explanation of the benefits of registration for visitors


101-110

  • Before asking the visitor's e-mail address, inform him about the advantages and frequency of sending newsletters
  • If the website supports the communication of users through a chat or other similar means, do not limit themselves to only the general links to them (topics of discussion and the schedule of conferences)
  • Do not put guest books on business / corporate sites
  • The date and time should be specified only for information related to real time, news, chats, stock quotes
  • Show visitors the time of the last page refresh, not the current time
  • When referring to the time required to specify the time zone (for international sites)
  • Use the standard abbreviations "p.m." or "P.M." (for international sites)
  • When specifying a month, use its full name or common abbreviation, rather than the numeric designation
  • To display numbers having five or more digits, use the delimiter adopted in your country
  • Displaying a column of fractional numbers, you need to align them by the decimal point



I do not know ... you can certainly disassemble a single "knee-deep" site and tell where there is a bunch of errors and shortcomings. But this is not interesting. If you want to get this information - you can go to any SEO site and include a usability check of any site. Oh there ponavydaet mistakes !!!!! The main thing - do not leave koeridnatov their! And then you will not repudiate. You will have to talk to their manager once every six months.

It is much more interesting to make out a few mistakes in the usability of absolutely different things. Yes, even remotes from the TV! More so do not do the way, but I have one taco remote managed to see and use! And the truth was uncomfortable.

So.

Example 1. QIP. Add to the contacts list.

To you someone has written, or you to someone. It does not matter, there is a person who flashes gray and you decide to add it to your contact list. The idea is simple - click on his nickname and select the appropriate item in the menu. But it was not there:

As you can see from the screenshot, the item we need is literally ENVIRONLY directly opposite functions. At the same time, the font is rather small and it's easy to make a mistake.

The bottom line is that by deleting a contact or adding to ignored ones, you can not add it to your list. It must be manually found, deleted from the ignored, waiting for it to write something to you, and again try to add it manually.

Tell me, how could such an important item as an addition be put between two deletions?

Example 2. Program switch on TV

Another example concerns the unsuccessful location of the buttons on the remote control.


You click the channels back and forth, and very often (at least for me), the finger falls but the button Sleep. What does she even do here is not clear.

But that is not all. Well pressed not there and it is not terrible, we click further.

The problem is that the action of the Slip button is deferred. And so, when you chose the channel, watch it, after 10 or even 20 minutes you have bang - and the TV turns off! Just….

And you already forgot that you pressed something. After 10 minutes (the step of the button) - this is a very long segment between the action and the result.

The volume buttons, as well as the channel switching buttons - are the most used and cause instant, expected action. They should be separated from other buttons, especially since there is space (for example, to raise up, those buttons are not used at all).

Do not put frequent buttons with rarely used, especially with a different period of action (immediately switch or turn off after 20 minutes).

Example 3. Remove SMS in HTS

The most commonly used by me is the SMS removal. The fact is that I receive a lot of work and technical SMS every day: the protection code, the confirmation of the operation, the entrance to the private, the notification of the end of the balance, etc.

To perform some operations with the message, you must click on it in the text box. But if this, say, a message from WebMoney - it's not so simple and done. The fact is that there is a huge number of figures, and all the figures are considered working information and when you hit it - immediately tries to call it or send a message.

But, let's say, it turned out, we got in the right part, the window opens:

Because the touch screen of the HTS is still cheap, very often instead of deleting the message - I save it. And then I have to delete it twice. And the chance of making a mistake also doubles.

It seems to me that the removal should be separate. So that it can not be confused with anything (and you can not accidentally delete it, and when you delete it, it is not saved).

The most interesting is that when working with a message through the menu, the removal is in additional functions, which I personally do not understand.

Well, now the flagships are usability. A couple. So already a blog as a book as usual !!!

Google Play Store
The Google Play Store online store has thousands of applications and paid / free software products that can be downloaded directly from a website or phone under the management of the Android OS. Competently organize such a huge and diverse amount of information - this is not an easy task for developers of usability online store. The example Google Play Store shows that you can create a navigation system that allows you to find any of the necessary programs in one or two clicks.

The design of the resource is simple and attractive. The screen is free of unnecessary information, which is partly due to the navigation menu on its left.
Mozilla
The company Mozilla Corporation - the creator of the third most popular in the world free browser Mozilla Firefox

The official website of the company seems simple and brilliant at the same time. Having identified the main goals of their target audience, Mozilla did not play hide-and-seek with clients, but placed the information they needed (information about the company and products) right on the home page. You can download the browser right there.

Knowing the needs of the target group is important for all marketers, and the company using this information can make your site or lending convenient, friendly and, of course, profitable.

 Apple
Computer giant Apple never disappoints its usability. A convenient and attractive interface of absolutely all devices is one of the reasons why people will always choose "iPhones", "iPads" and "MacBooks". Have you noticed that the official Apple page does not require scrolling?

All that you might need, "apple" designers have managed to place on one screen, without scrolling! Definitely, Apple understands usability.

No comments:

Post a Comment