09 Sep 2014
A quick tutorial on how to capture animations and transitions into InVision for design discussion.
The web is not a static medium. Animations to offer visual feedback to a user are becoming commonplace as the technology to easily accomplish this becomes more prevalent.
InVision - http://www.invisionapp.com/ - is a great app for design discussion and prototyping but demoing animations & transitions that are an integral part of the prototype is currently not a documented feature.
As a requirement arose to allow a distributed team to view these animations I worked out the following solution. While not as smooth as the usual InVision workflow, it still works well for required use cases.
Firstly, an additional piece of software is required to capture the animations and transitions as an animated gif. For this I recommend the open-source and easy to use LiceCap - http://www.cockos.com/licecap/. This offers a cross-platform solution for Windows and MacOS (it should also run under Linux using WINE or alternative options can be found in this thread - http://askubuntu.com/questions/107726/how-to-create-animated-gif-images-of-a-screencast.
Initially, use LiceCap (how to record with LiceCap demo here to capture an image showing the animation you would like to add to InVision for discussion.
Example animation captured using LiceCap
Keep this image simple, if you have multiple animations, record them separately and upload as individual screens to avoid confusion around comments.
I’d also advise not demoing transition between screens using this method as any comments added may lose context as the animation moves between the different screens.
Once you have captured the animated image, simply upload to InVision as normal and add comments where required.
Animation uploaded to InVision with an added comment
This allows a distributed team to make use of the features contained in InVision while allowing relevant animations and transitions to be viewed and commented on.
16 Jun 2014
Having recently been doing some research around the EU Consumer Rights Directive - http://ec.europa.eu/justice/consumer-marketing/rights-contracts/directive/ - this post collects together useful information for retailers based in Europe
Various EU Currency
A useful overview from The Guardian - http://www.theguardian.com/media-network/media-network-blog/2014/jan/27/retail-eu-consumer-rights-directive
Consumer Rights Directive 2014: Why It Could Be Good News for Ecommerce
The EU Consumer Rights Directive: should etailers be worried?
Why the EU’s new directive could help you nail online customer experience.
The EU Consumer Rights Directive 2014 explained - a very useful overview and explanation from Joanna Perry
The online implications of new consumer rights legislation - useful look at the directive from Internet Retailing
EU Consumer Rights Directive: A top 5 checklist for the digital retailer - handy checklist from Session Digital
Hopefully this information proves useful for anyone looking for information and guidance around the recent changes.
If you know of any other useful resources, please let me know and I can update the article.
13 Jun 2014
A recent question on useful resources for learning typographic theory had me digging through my old bookmarks to find the most useful. This post is designed as a future reference and a way to collect these resources together.
Butterick’s Practical Typography
http://practicaltypography.com/
An excellent resource by Matthew Butterick (https://twitter.com/mbutterick) who also created the legal specific http://typographyforlawyers.com/ resource. Practical Typography offers an excellent overview of typographic theory and is an excellent starting point for learning more about this area.
The Elements of Typographic Style Applied to the Web
http://webtypography.net/toc/
A web–specific version of the excellent Elements of Typographic Style book maintained by Richard Rutter. Very useful overview and intro to the more in–depth and non web–specific original.
Typekit Practice
http://practice.typekit.com/
Useful lessons and references regularly updated and maintained by Adobe Typekit.
Thinking with Type
http://www.thinkingwithtype.com/
Website to accompany the Thinking With Type book (http://amzn.to/1pRrh3V). While slightly dated now, the typographic theory is still relevant today.
Now Buy the Book
While all these are useful online resources, one of the best investments I can recommend when it come to learning typography is to purchase a copy of Robert Bringhurst’s Elements of Typographic Style (http://amzn.to/1itePlL)
Having a copy of the book to hand and seeing the typographic theory applied in print can really make a difference to really understanding what is happening and why.
Hopefully these resource will prove useful when looking to learn about typography.
10 Jun 2014
Problems with Silverback
For quite a while Silverback - http://silverbackapp.com/ - has been the chosen app for recording usability testing on OS X.
Silverback App
It offered an easy way to to capture both what was happening on screen and live audio and video of the user taking part in the session and was very reasonably priced compared to the PC alternative, Morae - http://www.techsmith.com/morae.html.
However, it has recently started to degrade as a useful system, a operating system update prevented the use of inbuilt iSight cameras on the current MacBook range;
SUPPORT UPDATE: Apple recently removed a core component that prevents Silverback from connecting to the new FaceTime Camera in the current Macbook range.
which could be worked around by making use of an external webcam. This made Silverback less of an all-in-one solution but was still workable. But following this there now seems to be a general problem with Silverback not capturing audio which they seem slow to address - https://getsatisfaction.com/clearleft/searches?query=sound&x=0&y=0&style=topics
Looking for an Alternative
I spent some time looking around for a OS X based alternative before discovering that an ideal solution was inbuilt to the OS, QuickTime - http://www.apple.com/uk/quicktime/
The reason for me that this didn’t immediately jump out is that QuickTime has always been labelled as a media player and it’s recording functions are not obviously labeled - http://support.apple.com/kb/PH5882?viewlocale=en_US.
How to Record with QuickTime
- Start up QuickTime Player
- From the menu, select File > New Screen Recording
QuickTime New Screen Recording
- From the recording options, if required, select the microphone to record user audio to accompany the screen capture, you can also very usefully record where the user clicks
QuickTime New Screen Recording Microphone Settings
- Then just click the red ‘record’ button to start capturing what’s on screen.
Capturing User Picture-In-Picture Style
For this you just need to start two recordings from the menu;
File > New Screen Recording
And
File > New Movie Recording
The New Movie Recording option will open a video capture screen from the inbuilt MacBook Pro iSight camera (or an alternative webcam if required), reduce this window down, drag it to the corner of the screen with the system being tested and start a New Screen Recording. This will now capture both the user and the system.
29 May 2014
Following on from the interesting talk by Christopher Bush (https://twitter.com/suthen) on Guerrilla usability testing (http://nuxuk.org/2014/03/21/nux-leeds-24-april-guerrilla-testing/) one aspect that I thought was a great idea was the use of text expansion to add a timestamp to observation notes (see slide 24 on the NUX page) to make them easier to cross-reference to recordings at a later date.
Since OS X Mountain Lion, Apple have included an in-built text expansion tool hidden away under the keyboard settings.
OS X Text Expander
But this doesn’t allow for timestamps to be added. There are a few application available for this in the app store such as TextExpander (http://smilesoftware.com/TextExpander/index.html) but this seemed over complex for the single use case required.
Looking for other options, the discontinued xType (http://www.adnx.com/web/english/app4mac) seemed to be the best solution. Due to being a discontinued product instructions on making this application work with OS X 10.9 pointed towards the older, pre-10.9 accessibility options but I was able to get this working through the following procedure.
- Download and install xType - http://mac.softpedia.com/get/Utilities/Presto-app4mac.shtml -
version 1.3.1 is the most up-to-date.
-
Install and launch as usual, you will see a prompt to open the Accessibility options to allow xType to work but the required option is no longer located here.
OS X Accessibility Settings
-
Navigate back to main System Preference and select the ‘Security & Privacy’ options.
OS X Security & Privacy
-
Select Privacy > Accessibility, click the padlock icon and enter password if required.
OS X Accessibility
-
Click the checkbox for xTypeAgent then click the padlock icon to prevent further changes.
xTypeAgent
xType should now work as required. Go into the application itself, create your required shortcut for the timestamp (in this example .t) and use the extras drop-down to set your preferred date/time format and set the option to only work in your note taking app.
xType Settings
Now whenever making observation notes simply type .t and the current timestamp will be added to your notes. Following on from Christopher Bush’s suggestions you can also use the text expansion to highlight what area the note relates to so .tn could indicate a navigation issue .td a design one for example.
Hopefully this information helps streamline your own usability test process.
