Interaction design

All about web user experience and good design practice

Mobile lightbox or overlay

Posted by Dan on May 13, 2014

Overlays are an aggressive disruptive method of getting users attention. If abused or not implemented properly, visitors may leave the site. Especially on mobile, due to the limited screen size, there are better solutions. As usual it depends on the context and content. Highly recommend that you evaluate the need for a (mobile) overlay on a per-project/per-application basis.

Some applications that could be using overlay (but could be handled with an alternative):

  • Web survey
  • Can I help you chat function
  • Modal dialog message   (if content is limited, say just one line of text and 2 buttons, then these are maybe the only exception for using mobile lightbox)
  • Image slideshow or video preview
  • Content preview  (by clicking a ‘?’ or info-button)
  • Other

Alternative solutions:

  • Fixed-position button that scrolls along while the user moves down the page
  • Fixed-position button appearing at some point e.g. appears only after if the user has scrolled 1 pagelength down
  • Prominent content on the page  (e.g. near the navigation header)
  • Navigate to new page, expand an accordion, slider/carrousel, swap content.  (for lightbox overlays that appear after a user clicks something)
  • Modal dialog. Probably using the alert JS function (TBC if it’s feasible to add links and other rich content)
  • Other solutions

Some principles (if overlay is the only option):

  • The overlay should always be visible in the mobile viewport. It should never be the case that a user scrolls and only sees the overlay background.
  • The close button should always be visible. (must-have).  This is often in the form of an X in the top-right and/or “Close” button, but can be a floating X or auto-hiding X as done in some Jquery plug-ins.
  • Overlay background should be visible so that user knows it’s an overlay that is part of the site.
  • Sometimes it needs to be clearly part of the site (e.g. branded or mentioning company/website name the title)
  • The overlay should be resized and the content scaled down (see some Jquery plug-ins for overlays/lightboxes)
  • It needs to be carefully tested on different devices/browsers. Zooming in and out of the conten should be possible, without hampering the possibility of closing the overlay.
  • Content should be limited on mobile. Scrolling can be problematic.
  • Generally it is not recommended to show an overlay after x seconds, especially if the user doesn’t expect it and didn’t click anything.

 

General behaviour

  • For regular overlays
    • Clicking outside the overlay will close it
    • Clicking on the X will close it (as is)
    • Pressing Escape key will close it (as is)
  • For modal overlays
    • Clicking on the Close label, image and/or button will close it

Examples and best practice 

 

A reasonable example is the cookie lightbox of www.Hertz.com on mobile:

-       Manage expectations. It seems to appear 1-2 seconds after the homepage is loaded, so the user still knows he’s on the right website and can still act on the cookie request. (dispite that lightbox may not be the best solution for cookie permission)

-       Closing. There is a clear, branded “< back” button placed on the top of the overlay, making it quick and easy to close or ignore the message.

-       Flexible. It takes up the full real-estate of the screen and if there’s a lot of content this is not a problem, it can be quite tall.

 

 

Conclusion

Because of the limited mobile screen size and the uasbility requirements listed here, content needs to be limited and overlays are often not ideal on mobile. Overlays that are limited in content and user-triggered may be an exception. In any case overlays must behave properly, as outlined in the principles above. I recommend to make a list of on what pages overlays are needed and approve the need for a (mobile) overlay on a per-project/per-application basis. If you have little control over this, offer guidelines (in the CMS or another form) to help the client realise the negative consequences of mobile overlays and offer suitable alternatives. Consider limiting the use of mobile overlays for the sake of conversion and the client’s own sake. Provide a overlay solution that can handle any type of (large) content and test it well.

Posted in Interaction Design, Mobile, patterns | Leave a Comment »

Usability in the real world

Posted by Dan on March 23, 2014



Car park in Belgium: Elevator or toilets?

lift

 

 

Car park in Belgium: Where am I parked?

parkspace

 

 

More – Psychology of things book

More https://www.facebook.com/Belgiansolutions

See also: Web bloopers book

 

 

Posted in Uncategorized | Leave a Comment »

Layout options

Posted by Dan on March 23, 2014

 

When designing you generally have these layout options. Using any of these patterns often will have pros/cons and consequences on the flow and rest of the page design. Possible factors/pro-con considerations influencing your decision are:

  • real-estate  (and fold)
  • visibility/prominence
  • suitability
  • loss of orientation
  • convention versus intuition

 

Vertical layouts

Vertical tabs

 

Cards

google-now-cards-600x318

 

 

 

CON: Everything is shown expanded resulting in information overload and clutter.
PRO: No sub-navigation is needed

 

Accordions   -  popular with mobile  (risks)

Anchor links

Carousel

  • Warning: http://bradfrostweb.com/blog/post/carousels/

‘More details’ link (half-way accordion)

 

Horizontal layouts

Horizontal tabs

Row of links

Row of buttons

Thumbnails

 

 

Other layouts

Rollover tooltip / toast message

Lightbox

Navigate to a different page

‘next’ button

Progressive menu (or expandable tree)  -  popular with mobile

Filters   (or row of toggles)

Swap content  (flip div)

A combination   –   e.g.

, expand an accordion, slider/carrousel, …  (for lightbox overlays that appear after a user clicks something)

 

Some things to note

NOTE:

  • Tabs can also look like buttons or large links

 

ENIMAGE1346765261199

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Further reading:

http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/

http://bradfrost.github.io/this-is-responsive/patterns.html

http://designingwebinterfaces.com/essential_controls

https://www.patternfly.org/wikis/patterns/pattern-development/pattern-whiteboards/secondarylocal-navigation/

 

Posted in Interaction Design, patterns | Leave a Comment »

Axure annotations: show/hide call-outs or footnotes

Posted by Dan on January 30, 2014

In this article I briefly discuss the possibilities of annotating your designs, with the option of quickly removing annotations when you don’t want to show them in your deliverable.

Let’s face it: Axure doesn’t have an quick and clean way to annotate your wireframes. This can be a pain when you are using your designs for different purposes:

1) you want an annotated version of your designs for functional documentation,

2) but you also want a clean non-annotated version.

 

Annotation is typically done with call-outs or “numbers in bubbles”.

In Axure the standard way to annotate your wireframes is using footnotes. Unfortunately these footnotes are very small and can’t easily be customised.

 

Option A – temporary delete/move

Unfortunately there is no quick and easy way to publish an Axure without your call-outs.

The best I can suggest is to temporarily delete or move the call-outs off the screen before publishing. Repeat this for every page you want to publish without call-outs.

with call-outs

 

without call-outs

Option B – dynamic panels

There isn’t the ease like layers in Photoshop. Axure does have dynamic panels. These work a bit like layers as you can quickly show/hide/move them, even in your clickable demo. But to edit a layer’s content you have to click around a lot  (see demo http://screencast.com/t/mItXg1bqsg) switching back and forth between the annotation layer and the wireframe layer until the annotation is at the correct position.

If you go for the delete option, then you may also want to use the group feature of Axure. This way you can quickly select all call-outs at once (and then undo the change. Before you start, make sure to save your file as a different version, so that you don’t lose your original call-outs locations.

Option A or B?

I would go for either of these options, depending on the project. I usually just use custom annotations (option A) but then keep the call-outs in my click-demos. That’s because deleting them all just takes too much time. It might not be acceptable for all client presentation though.

 

 

 

Option C – footnotes

Other options like the built-in yellow Axure footnotes/annotations like this: cid:image005.png@01CE200F.E3F0F220  are advanced but unfortunately not easy to maintain. They are also hard to read.

 

Hope they improve this in the next Axure release!

Posted in Deliverables, Interaction Design | Leave a Comment »

Gathering feedback

Posted by Dan on November 26, 2013

http://zurb.com/university/library/15

Posted in Interaction Design, Workflow/process | Leave a Comment »

Prioritizing fixes for conversion

Posted by Dan on August 9, 2013

PIE framework @ http://www.widerfunnel.com/conversion-rate-optimization/how-to-prioritize-conversion-rate-optimization-tests-using-pie ++

  • Potential  (Heuristics, voice of customer)
  • How much potential is there for conversion rate lift on this testing opportunity?
  • Importance  (traffic volume, cost)
  • How important is this page? How many visitors will be impacted from the test? What is the traffic volume? What is the cost of the traffic? What is the quality of the traffic? What is the impact on ROI?
  • Ease  (Political, Technical)
  • How easy is it to test on the identified page? What are the barriers, both technical and political, to testing that surround this page

Related:http://www.buildingkeystones.com/2013/07/dont-trust-your-gut-conversion-optimization-advice-from-chris-goward-part-1/

—-

A poll @ http://seewhy.com/blog/2010/09/21/website-conversion-priorities/  gave:

  • SEO
  • Website and Landing Page Optimization:
  1. Reduce clutter
  2. Re-examine text on a page
  3. Re-evaluate form fields

—-

http://www.widerfunnel.com/conversion-rate-optimization/the-six-landing-page-conversion-rate-factors

  1. Value proposition  (competitive price-value, etc ?)
    CONVERSION DRIVERS:
  2. Relevance   (what they exepceted)
  3. Clarity  (well-articulated value and CTA. Design, content, eyeflow. Content clarity ensures the images and text combine to minimize comprehension time.)
  4. Urgency  (offers and deadlines )
    CONVERSION INHIBITORS:
  5. see article

—-

http://conversionxl.com/how-to-build-a-strong-ab-testing-plan-that-gets-results/

 

——

See also Prioritizing Usability book/pie chart by Nielsen

Posted in Uncategorized | Leave a Comment »

Sketchboarding the user experience

Posted by Dan on January 7, 2013

Sketchboards are popularised by Adaptive Path. Wireframes as a first step are too slow and detailed. The collaborative use of the sketchboard opens up the design process to everyone involved (all stakeholders including clients, visibility for management). Designers need a quick way to explore many different possibilities of the bigger picture, solo or in collaboration.

Related concepts

User flow -

Sketchboard – your starting point?  “inspirational material such as personas or requirements are used as a starting point to drive the conceptualization process”

Experience map – typically showing the full concept, official deliverable and usually not sketched

Canvas flow

Wireflow – mix between wireframes and user flow

Speech bubbles – used as a starting point per user, or showing the thought processes step-by-step for one particular user, these are annotation elements

Customer journey mapping

The process, coarsely speaking

  1. Get out a big sheet of paper (2-3 meters) and stick it to the wall
  2. Use sticky notes to divide the sketchboard into broad topics like Design/User Personas or steps that your users will take (signup, log in, edit details, close account, etc).
  3. Use paper or the UX Sketchbook to start roughing out ideas or thoughts
  4. Stick them to the board  (DS: preferably everything is sticky and can be moved around)
  5. Move things around

From: Sketchboard before you wireframe – Treehouse Blog

The process, detailed steps

See http://www.slideshare.net/ugleah/sketchboards-prototypes-presentation
and http://www.boxuk.com/blog/using-sketchboards-to-design-great-user-interfaces

1. Gather the  inputs:

On the left side of the sheet (label it “Input” and optionally draw a dashed vertical line to separate it from the wireflows that sit on the right-side)

- sitemap

- scope items

- objectives

- add criteria  (requirements/user stories)  (

- users  (personas, facts)

- success metrics

2. Sketch, sketch, sketch

Start sketching on separate papers

  • Start with 6-up (A4 landscape) multi-page templates (a.k.a. thumbnail sketches) to explore one problem from different angles, or explore a possible flow  (example) (template)
  • - Focus first on quantity. Go right-brained. Your goal here is to come up with many different ideas or usability solutions without being too critical or pixel-perfect at this stage.
  • - stick them up on the board
  • - “take a step back and think about which one works best. Maybe [it's a hybrid]. Do another thumbnail sketch if this is the case, then” go for the 1-up template.
  • - don’t use pencils, just scribble it out to not get perfectionist over the details

Then sketch full pages using this single-page template (1-up) to “zoom in” on a particular thumbnail idea with slightly more detail

  • - add headers, visual weight, functional elements
  • - remain sketchy, don’t overdo it on the fine detail

3. Start your sketchboard

  • Divide it into steps that your user will take or stages of user process  (these should be labeled big)

- “Once you’re happy with the position and grouping of your sketches, replace the Post-It headings with inked ones – a big chisel tip Sharpie works well (just make sure the ink doesn’t bleed through the brown paper and onto the wall!) “

  • Roughly organise  your problems and constraints
  • Optionally add research findings, competitor examples and other inspiration libraries
  • Select, evaluate, discuss, critique, decide – collaborate!

4. Share and iterate

- take it to your team in a tube

- take (seperate) notes for feedback (not on the board)

- go back and add summarized changes as annotations to your board

“During the evaluation sessions, annotate your sketches, use Post-It notes, and amend or create new sketches as required to capture feedback, suggestions and corrections”
5. Start wireframing

- THEN make the wireframes and/or prototype on the computer

Learn more about the process

Sketchboard examples

Screen 00000

Sketchboard - priorities added

full58

http://wireframes.linowski.ca/2009/05/sketchboarding/

20110517-euh8dhicmgytdycsxpt1a77xt6

http://blog.teamtreehouse.com/sketchboard-before-you-wireframe

Resources

$ Tools

- Drafting dots  (sticky)

- Mobile whiteboards  (lightweight, useful if you lack wall space) or large piece of cardboard

Examples

http://pinterest.com/Webhode/user-experience/

Related articles

http://uxdesign.smashingmagazine.com/2012/01/04/stop-designing-pages-start-designing-flows/

http://conversionxl.com/how-to-design-user-flow/ 

http://experiencinginformation.wordpress.com/2010/05/10/customer-journey-mapping-resources-on-the-web/

See also:

Types of deliverables WP post

Learn more

http://konigi.com/book/sketch-book/work-fast  TIP videos

More videos @ http://lanyrd.com/search/?q=sketchboard

http://www.usercentered.de/links/design-studio-und-sketchboards-materialsammlung/

Ideas, tools, alternatives

Consider using Prezi for wireflows and sitemaps. It’s a less linear, more free-form and animated way of telling a story. Alternatively, zoom in manually in powerpoint.

Collaborative design workshops

http://jasonfurnell.wordpress.com/2010/12/01/facilitating-collaborative-design-workshops-a-step-by-step-guide-for-rapidly-creating-a-shared-vision-for-execution/

Posted in Deliverables, Interaction Design | Leave a Comment »

Designing with SEO in mind

Posted by Dan on July 17, 2012

http://searchenginewatch.com/3635882

 

See periodic table and read http://searchengineland.com/guide/seo

Posted in Uncategorized | Leave a Comment »

Clever websites to save the world

Posted by Dan on July 6, 2012

  • Freerice.com – guess word definitions while feeding the hungry  (similar concepts)
  • DuoLingo.com – translate the web while learning a language
  • ReCaptcha – prove that your human while translating digitised books
  • TheHungerSite.com – click to donate for free
  • Ecosia.com  - CO2 search engine  (similar)
  • Blackle.com – power-minimising Google search engine

Posted in Uncategorized | Leave a Comment »

Credibility and trustworthiness of websites

Posted by Dan on March 28, 2012

http://www.humanfactors.com/downloads/mar12.asp#Eric

“trustworthy” homepages [on first impression] [...]  showed high balance, high contrast, moderate graphics-to-text ratio, and moderate text-to-background ratio.

[...] what make something appealing? That was the focus of the third study. There have been a number of models to define appeal (or “aesthetics”) over the years. Lindgaard, et. al analyzed their data with respect to six well-founded design attributes – symmetry, density, balance, contrast, graphics-to-text ration, and text-to-background ratio.”

Posted in Uncategorized | Leave a Comment »

 
Follow

Get every new post delivered to your Inbox.