Sunday, 23 March 2014

Usability

Usability

Why people focus on the right-hand side of a design

http://www.creativebloq.com/netmag/why-people-focus-right-hand-side-design-3146267?utm_content=buffer8e495&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer


"Which will get the best positive reaction by users? I’ll tell you: it's the one with the positive actionable button on the right. This is because users trust that the next step will pull them forward in the journey they are on."


People read left to right.
"But since users move their eyes from top-left to bottom-right, we can see that putting an actionable item in our final quadrant will get the best result."



Presenting Information Architecture



Interface Design






Information design guidelines


Every web page needs:
  • An informative title (which also becomes the text of any bookmark to the page)
  • The creator’s identity (author or institution)
  • A creation or revision date
  • A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights
  • At least one link to a local home page or menu page, in a consistent location on all pages
  • The home page url
Most web pages should also incorporate these additional elements:
  • An organization logo or name near the upper left corner, with a link back to your home page
  • Navigation links to other major sections of your site
  • At least one heading to identify and clarify the page content
  • Mailing address and contact information or a link to this information
  • Alternate (“alt”) text identifying any graphics on the page




 I mostly agree with all the considerations in this article, for example:

  1. First register strangle to find the "Login" link
  2. Use of Pop Ups, some browser have it blocked, so it is wise to avoid them
  3. Dropdowns menus are a nightmare for the user as they need to try to position the mouse in order to not loose the menu.
"

8 Usability Check-Points You Should Be Aware Of

  1. You don’t use pop-ups.
    Pop-ups interrupt the browsing session of the visitors and require an instant feedback. Respect your visitors.
  2. You don’t change users’ window size.
    The same argument as the one against pop-ups holds. Some browsers, e.g. Internet Explorer, saves the browser dimensions and uses them for further browser sessions. As Ben Bodien commented, “it’s just plain inconsiderate to assume that you know better than the user how their software environment should be configured?”
  3. You don’t use too small font sizes.
    Long passages are harder to read, and to read brief sentences readers need more time. It holds also for links, buttons, forms, search boxes and other elements. Good news — in Web 2.0 the opposite is the case.
  4. You don’t have unclear link text.
    Links have to be precise and lead to the destination they describe. Ambiguous link descriptions should be avoided.
  5. You don’t have dead links.
    There are too many of them anyway; why would you want to point your visitors to a dead end?
  6. You have at most one animation per page.
    If blinking images are wide-spread through the site, it’s extremely hard to focus on one single site element. Give your visitors an opportunity to perceive your content. Using animated ads, don’t place them right along your articles.
  7. You make it easy to contact you.
    Maybe because you just don’t want to be contacted, but If visitors do want to get in touch with you, but can’t find any contact information, you lose their interest and trust. Disastrous for online-shopping, a missed opportunity for the rest.
  8. Your links open in the same window.
    Visitors want to have control over everything what happens in their browser. If they’d like to open a link in a new window they will. If they don’t want to, they won’t. If your links open in a new window you make the decision which is not your decision to make.

"

How optimise a Landing Page


The relevant points in this article
  1. Reduce navigation and link options
  2. Clear Headline
  3. Call for action
  4. Use of an image or a text
  5. Testimonial and benefit of the site
  6. All the important stuff abode the fold (actual view on screen)

Accesibility

Use of title into html code

http://accessibilitytips.com/2008/04/14/avoiding-redundant-title-attributes/

 http://accessibilitytips.com/2008/03/25/using-titles-on-form-fields/

 This two articles put into perspective the use of Title in terms of Accessibility.
I can summarise the mains points as follow:

  • Avoid redundant Titles attributes: This attribute is supposed to supply optional SUPLEMENTARY information.  The best uses are with the abbr element and to provide additional relevant info in forms (see next point). Do not use it duplicating info that is already there, ,for examples in links: 

<a href="/sitemap/" title="Visit our sitemap">Sitemap</a>
    Some screen readers al set to read the Title plus the link text, so this is a redundancy as it would soun "Visit our site map site map" and others just do not read altogether.  Another roping is that create a barrier for screen magnifiers by blocking content. If the title attribute doesn't provide relevant info just do not use it.  However, titles are use for SEO purpose.
  • Using Title on forms fields: Every label is associate with one input field
The title attribute offers an extra avenue for associating text to a form field. It should not be used as the first means of associating a label text with a corresponding form field. In situations where supplementary information is useful, the title attribute is helpful. In some situations where using labels results in masses of duplicated and redundant text that need to be hidden offscreen, it makes sense to use a title attribute instead. As with all accessibility problems, use the solution that best serves the needs of your visitors.

 Screen reader test resultshttp://files.paciellogroup.com/resources/articles/WE05/forms.html

 How to position content offscreen so normal user cannot see it but screen readers can read it. http://accessibilitytips.com/2008/03/04/positioning-content-offscreen/

 Contrast checker
http://contrastchecker.com

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)