Desktop and enterprise software design

September 27, 2016

UX and UI resources, inspiration

Designing Interfaces (Tidwell), book

About Face 2.0

History and design background of Microsoft Word, probably the oldest software still in use.

User Interface Design and the change from desktop computing

(skip the last part about VMware marketing rant; insight into interface trends. Why are apps so much easier to use? Will desktop software look and feel more like apps in the near future?)


Pattern: inline labels

September 27, 2016

In reaction to Baymard’s post ‘avoiding inline labels in mobile forms‘ there is a recent pattern I have been seeing, at least have seen so far on 2 desktop sites:


Clicking an empty form moves the inline label to above textfield, and resizes label

It seems this patterns disregards Baymard recommendations, but still works for me. Still have to test if & how they did it on mobile. The only issue I can imagine is if the textfield is on top of the viewport. Otherwise shouldn’t seem a problem CSS wise.

Zoom effect

March 10, 2016


Make a Magnifying Glass Effect in PowerPoint

  1. Duplicate the layer
  2. Crop as a circle
  3. Add Bevel with height 18




How To Create A Simple Zoomed Effect On Screenshots In GIMP



keywords: portfolio

Powerpoint keyboard shortcuts for productivity

August 25, 2015

Alt, H, G, K Send to Back – Send the selected object behind all other objects. – Home > Drawing > Arrange > Send to Back
Alt, H, G, R Bring to Front
Alt, H, G, F Bring Forward

Alt, H, H Distribute Horizontal

……. Crop

Mobile lightbox or overlay

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 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.




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.

Usability in the real world

March 23, 2014

Car park in Belgium: Elevator or toilets?




Car park in Belgium: Where am I parked?




More – Psychology of things book


See also: Web bloopers book



Layout options

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







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


Accordions   –  popular with mobile  (risks)

Anchor links


  • Warning:

‘More details’ link (half-way accordion)


Horizontal layouts

Horizontal tabs

Row of links

Row of buttons




Other layouts

Rollover tooltip / toast message


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


  • Tabs can also look like buttons or large links
  • Re-use page templates  (see Consistency post)




































Further reading: