Interactive Screenshots for Online Training

Sometimes updating a software implies getting used to new interface components and functions.  This was the case, for example, of PowerPoint 2010 for those who were migrating from 2003 version. From my experience (and many users’) it was hard to accept the “ribbon interface” the first time I faced it, until I learnt to use it and discovered the advantages over the older version.

Weekly challenge # 26 was about creating Interactive Screenshots for Online training, so taking as a reference my personal experience, I built an example where the learner could compare both versions, switching from the new interface, to the old one he’s used to.

Migrating-from-older-versionIn my demo only four relevant differences were included; there are many improvements I still need to explore!.

I applied the technique of creating a Lightbox effect on slides, explained by Tom in this video. This emphasis effect is very easy to accomplish, and helps the users to focus on one part of the screen.

User Interface Design Patterns

When taking the course “UI Design Patterns” I learnt the basic patterns used for interfaces design. At the same time, I’m learning how to build e-learning content with Articulate Storyline, so I thought it would be a good idea to merge the design theory with the practice of the authoring tool.

Interface patterns can be grouped in different categories, depending on their function: for organizing content, for navigating, for structure the page, for getting input from the user, etc.

I made a presentation with five patterns used for organizing content:

  • Two-panel selector
  • Navigation tabs
  • List inlay
  • Slideshows
  • Hub and spoke

Although they were originally designed for websites,
they can also be applied in Articulate’ slides.

Click on the image

UI_Design_Patterns

 

I’m aware the aesthetics might be better (I’m still not expert ;)),

but I focused on each pattern’s implementation.

Hope you find this topic as interesting as I do.

User Interface Design Guidelines

Interface_Design_Guidelines

In the nineties, two well-known usability experts established a list of user interface design principles. Ben Schneidermann posit “Eight Golden rules of User Interface Design”, while Jakob Nielsen published “Ten Usability Heuristics for User Interface Design”.

There are some overlaps between Schneidermann’s and Nielsen’s recommendations.

Click on the image to see some examples

Although more than 30 years have passed, these rules are still taken into consideration to design user interfaces and to carry out usability evaluations.