This months’edition of the UX Magazine is now available online. I’ve made them into an ebook which you can download for your epub reader.
This information graphic was included in an Idea’s Bank article 1)article on Wired UK website titled “Mark Walport: Government must make the case for you to share” talking covering the UK’s impressive results on data sharing.
It was also published in the WIRED UK edition along with the article 2)article from the WIRED printed edition> “Infoporn: UK government tops tables for open data access”.
While I diasgree with parts of the article, the information graphic successfully communicates the information well.
More thoughts later.
This evening I tried to send a tweet saying:
I tried to attach this photo –
I received “unknown error” 4 times. Initially I thought it was due to image size, it was ~ 3MB. So I scaled it down to ~500KB and tried again. It still didn’t work.
Eventually, I thought – they’re not blocking it due to my naked toe, are they?
So I tried again, this time cropping out the offending naked, bodily appendage.
Surprise, surprise, it worked!
— Bernard Tyers (@bernardtyers) June 1, 2014
So, Twitter are blocking naked skin, even disconnected big toes. That’s going a bit overboard, eh Twitter? There is no sense in censoring that.
This is the first post in a series on hardware and software to carry out usability tests on a small budget, so call DIY usability testing.
These posts are mainly for people in the censorship circumvention technology community 1)Open ITP Circumvention Tech Summit and those who build privacy and security software.
They have certain needs around maintaining participant privacy, small budgets, ad-hoc testing, and geographically dispersed user groups.
I am starting with Screenflow as it is my chosen software tool. There are plenty others, and I’ll get around to them one by one.
When I have written about each tool, I’ll then give examples of the usability testing scenarios you may find yourself in.
What is it?
Screenflow 2)Screenflow product page at Telestream website is an excellent application released by Telestream 3)Telestream website. It runs on OS X only but there is a 30 day trial version 4)30 day trial for Screenflow available.
It is my choice of video recording application as it is very versatile, reasonably low cost ($99), and has very helpful support people.
What can I record with it?
It is a Mac OS X application, and most Apple laptops come with an internal camera and microphone.
Screenflow can record video from 1) the internal camera, 2) any USB cameras, audio from 1) the internal microphone, 2) any USB audio devices, and 3) the audio from the computer generated sound (eg video on Youtube, Skype audio, etc).
The configuration of the recording is done with a simple recording screen shown below.
Here is an example recording:
How do I edit the video?
Once you have recorded some video and audio, Screenflow presents the sources to you on a simple time based editing interface. There are a lot of tutorial videos 5)Screenflow tutorial videos on Telestream website to help you edit video with Screenflow.
Since you are using it for usability tests, you’ll have only 2, 3 video feeds and maybe 1 or 2 audio feeds.
The real power of Screenflow is being able to record the screen as well as USB video feeds as well. I’ll go into more detail about this in another post when I focus on doing mobile usability testing.
I don’t use Mac OS X
That’s OK, not everyone does. I use it because it is the best tool available for the job I do. Stay tuned for other options for Linux and Windows.
What is HTTPS Everywhere and what does it do?
It is a web browser (Firefox, Chrome, and Opera) extension that encrypts your communications with many major websites, making your browsing more secure 3)Description of HTTPS Everywhere on eff.org. Using HTTPS with websites, your Internet usage is much safer.
HTTPS Everywhere works as follows:
- a user types “HTTP://www.hsbc.co.uk” into their browser address bar
- HTTPS Everywhere automatically checks if it knows of a HTTPS addres for this site (This comes from a list it has verified)
- if there is a secure site available it redirects the users traffic to it
- the users Internet usage is now secure and private
- if there is not a secure site available, then it allows the user to continue to the insecure site
HTTPS Everywhere advanced options: SSL Observatory
HTTPS Everywhere has a “decentralized SSL Observatory”. This detects and warns users about security vulnerabilities, such as fake HTTPS security as the users browses the Web. It is available in the preferences.
Current SSL Observatory interface
Currently the advanced options look like this:
I think these advanced options are slightly confusing, in terms of how the user interface is layed out.
There are two options with explanations:
1. Submit and check certificates signed by non-standard root CAs
2. Submit and check certificates for non-public DNS names
Each have a check box as shown. The current UI shows the explanation outside the boundary of each option.
This can lead to confusion for the user as s/he may not see the association between the explanation and the option.
Suggested SSL Observatory interface
A better way to represent this would be to reverse the order and weight of the option and the explanation, and bound them inside the option box as shown below.
Displaying it like this communicates that the explantion and the checkbox are connected. The explanation is also in smaller font, as it is secondary, the text at the checkbox is the action.
Without the action, the explanation is misleading.
I have also changed the wording of the second explanation to explain the meaning of “secret” – secret in this case means, inside a company, uknown to the public.
I hope that’s helpful. Any feedback, please leave it in the comments.
[Update] I made a mistake: HTTPS Everywhere is configured with a list of verified HTTPS addresses for websites. SC (in the comments) very quickly picked me up on it. Thanks.
I’ve written about the problems when using the IPEVO P2V camera and Screenflow version 4.5 (20888).
The nice people from IPEVO got in touch and sent us out a new camera in super wuick time. Great customer service!
Recording video with P2V camera and Screenflow
As can be seen below, when we record the videofeed from the P2V camera and the desktop of the computer, with Screenflow it now works. Thanks Zora.
What changed? What was the problem?
(This is personal opinion. It might not help you.)
In order to find out what has changed between the old camera and the new replacement, I used the USB Probe utility in the OS X Developer Tools.
USB Probe allows you to investigate the technical details of whatever USB devices are connected to the computer.
There are a lot of differences between our old camera, and the replacement we were sent. In my opinion the information below are the main differences that will allow you indentify if you have the same problem.
The “old” camera
Device Descriptor (from USB Probe)
Descriptor Version Number: 0x0200
Device Class: 239 (Miscellaneous)
Device Subclass: 2 (Common Class)
Device Protocol: 1 (Interface Association)
Device MaxPacketSize: 64
Device VendorID/ProductID: 0x1778/0x0204 (unknown vendor)
Device Version Number: 0x1012
Number of Configurations: 1
Length (and contents): 905
The “new” camera
Descriptor Version Number: 0x0200
Device Class: 239 (Miscellaneous)
Device Subclass: 2 (Common Class)
Device Protocol: 1 (Interface Association)
Device MaxPacketSize: 64
Device VendorID/ProductID: 0x1778/0x0208 (unknown vendor)
Device Version Number: 0x1128
Length (and contents): 665
I can confirm using Screenflow 4.5 (2088), OS X 10.9 (currently up to 10.9.3) and an IPEVO P2V (Device Version Number: 0x1128) you can record the camera feed, and the screen of the computer.
So, thanks to the great people in IPEVO. You’ve really helped. Now we can do usability tests again with our mobile testing kit.
If you’re looking for a great external camera at a great price for usability testing, I highly recommend the IPEVO P2V.
Professor Osmo Antero Wiio 1)Osmo Antero Wiio article on Wikipedia was a professor of economics at the University of Helsinki, and also a member of the Finnish parliament.
He is best remembered for “Wiio’s law” 2)Wiio’s Law article on Wikipedia which states that “Communication usually fails, except by accident”.
The full set of laws is as follows:
1. Communication usually fails, except by accident.
— If communication can fail, it will
— If communication cannot fail, it still most usually fails
— If communication seems to succeed in the intended way, there’s a misunderstanding
— If you are content with your message, communication certainly fails
2. If a message can be interpreted in several ways, it will be interpreted in a manner that maximizes the damage.
3. There is always someone who knows better than you what you meant with your message.
4. The more we communicate, the worse communication succeeds.
— The more we communicate, the faster misunderstandings propagate
5. In mass communication, the important thing is not how things are but how they seem to be.
6. The importance of a news item is inversely proportional to the square of the distance.
7. The more important the situation is, the more probably you forget an essential thing that you remembered a moment ago.
While these laws are funny, they’re useful when designing computer based communications tools for humans.
Here are some thoughts from today about a discussion we had on Twitter about representing a message property in a messaging app UI. I’ve tried to make it as coherent as possible. I may have failed. Hopefully not.
What is TextSecure?
Textsecure is the excellent SMS and data messaging app 1)Textsecure on Wikipedia from WhisperSystems 2)WhisperSystems the open source project founded by Moxie Marlinspike the open source project.
It is designed to provide the user with end to end privacy unlike WhatsApp 3)Steal WhatsApp database proof of concept by Bas Bosschert (warning: heavy technical details!) , Line 4)LINE users scammed due to security hole, Viber 5)Viber accused of spying on users.
Why is it different than other applications?
When Textsecure user communicate with others who also use Textsecure, it provides them with end to end encryption of their messages. The contents of their messages can not be read by 3rd parties.
If they communicate with other Textsecure users over SMS, it will encrypt the contents of their messages, protecting them. However the meta-data of the conversation (who sent SMS to who, when, and from what physical location) is still exposed.
To try and combat the exposure of this meta-data WhisperSystems have developed an encryption mechanism, mediated by infrastructure under their control, which limits (or possibly removes?) this meta-data exposure, and providing encryption also.
Why is this important?
It’s important as the users are not at risk of of interception of their messages, and surveillance of who they are messaging.
Since messages can have different states, there needs to be a way of representing each.
- sent by SMS and not encrypted
- sent by SMS and encrypted
- sent by PUSH messaging and encrypted
A discussion on Twitter mentioned that the use of colour was not ideal:
@moxie re Textsecure, can you consider icons rather than colours to show which protocol was used? It’s a bit too extreme as it is now.
— Smári McCarthy (@smarimc) May 1, 2014
So after a few overs and back, @moxie mentioned the discussion thread 6)Discussion thread on the Textsecure Github repo, where people were discussing this:
So, here are my opinions – partly as a Textsecure user and partly as a user centred designer.
I am speaking as a European user who is privacy sensitive, the most importance piece of information I want to know is if my message is encrypted or not.
In the thread mentioned above, there was discussion about the design patterns to follow, if iOS’s model of green for SMS and blue for iMessage was a good model to follow. My opinion would be Android is different than iOS. There are a few ways to handle this.
- if there are no plans to bring TextSecure to iOS, then TextSecure should follow Android design guidelines because it’s an Android application. No-brainer. I can’t think of *any* valid user centred design reasons why you would have iOS design patterns in an Android application.
- if there are plans to bring TextSecure to iOS then maybe you might want to take into account making TextSecure look the same on both. The reason is this will assist users when they switch from one to the other. Because, some will. It’s a given.
- or possibly keep the Android UI close to the Android guidelines and develop an iOS version close to iOS guidelines
That decision will ideally be informed by user research, talking to users, and measuring iOS user requests for an iOS version.
It would be farking wonderful if a TextSecure client could be developed to private iOS users with private SMS and push messages.
Is there a need to communicate what transport is used for the message?
In terms of communicating if the message is sent over SMS or over PUSH, there needs to be a decision if it is a characteristic users WANT to know. Asking users is a good way. 🙂
Get a simple survey together and ask TextSecure users to fill it out. Provide it in anonymous form. I’d happily help put it together.
Speaking as a user living in Europe where I have unlimited (almost) SMS’s, I don’t mind if it is sent over SMS or PUSH. However, if I am a user in the US and SMS costs a lot, and I have a data plan, then maybe I want to know.
@bernardtyers Users with crappy SMS plans do…SMS is expensive from the US to other countries.
— Jillian C. York (@jilliancyork) May 1, 2014
Possibly more important is: if sending a PUSH message is provably more secure than sending an encrypted SMS, then maybe I need to know how it was sent.
How to represent transport in the UI
From a user centred design point of view, it is not ideal. There are a number of reasons:
- It is not accessible to people who are colour blind. Red/Green colour blindness affects approx 10% of all men. As a result, they will not see this.
- In itself colour does not convey any meaning. The first time user will have no idea what it means.
- There is a a need for the user to retain recognition – does blue mean PUSH or does green mean PUSH? I don’t remember. I do not agree that there is a higher cognitive load associated with colour. More a higher recognition need. I’m happy to be proven wrong with some real research. 🙂
A Textsecure user on Twitter mentioned she also found it unhelpful:
Inform the user first time of install to what the colours mean. Like those “silk screen” walk-throughs. Just a thought.
Using words like “SMS” “PUSH”, etc have some issues…
- Translation (if they are to be translated)
- People with dyslexia. I do not know if there is any research focusing on the minimum/maximum number of characters people with dyslexia can have issues with. I have asked some other HCI friends who know more about it.
- There could be issues with cultural understanding – is “PUSH” English jargon? I know what it means, but does a non-technical user from understand?
Text *may* be a good option, but the char count would need to be short – something like “SMS” “PUSH”, “DATA”.
1. Lots of icons are not good. Ever.
2. Icons are the lazy approach. 🙂
TextSecure tries to send the message via the most secure transport possible:
- If it succeeds, only display that it the message is secure.
- If that fails, then fall back to SMS, and show both using icons a) the message was sent by SMS and b) that is was sent insecurely.
Possible ways to get a better decision
It would be good to get feedback from first time users as to their understanding of the colours.
Get some new users and ask them what they think the colours mean. Don’t tell them what it means, let them figure it out, or not, themselves.
I’d be happy to put together a small user testing session if someone can point some new users towards me.
I’d be interested to hear what others have to say.
|1.||↑||Textsecure on Wikipedia|
|2.||↑||WhisperSystems the open source project founded by Moxie Marlinspike|
|3.||↑||Steal WhatsApp database proof of concept by Bas Bosschert (warning: heavy technical details!)|
|4.||↑||LINE users scammed due to security hole|
|5.||↑||Viber accused of spying on users|
|6.||↑||Discussion thread on the Textsecure Github repo|
This post is to give the people from Telestream and IPEVO some extra information about the problem I have using our excellent IPEVO P2V camera with Telestream’s fantastic Screenflow software. Hopefully you can help me sort this problem out.
I use Screenflow and my IPEVO camera as a mobile guerrilla usability testing lab which I can carry around in my backpack. I’ve used it for almost 3 years – I’ve used it for my dissertation, for commercial usability testing, and most recently for my current project with the UK Passport Office.
Making a Screenflow recording with 1) the screen of my computer, 2) the video feed from the IPEVO camera does not work, and 3) the audio recorded from my computer.
The nice people in IPEVO and Telestream have been in touch and suggested some tests – rebooting, changing USB ports, making sure no other software application is using the camera. All of these were unsuccessful, at which point I had a look in the system log.
This is my test procedure:
- Plug in the P2V camera
- Start Screenflow
- The P2V camera feed is shown on the “monitor” screen
- Start Screenflow recording
- Record for 5-6 seconds
- Stop and play back
As mentioned below there is an ~ 9 second delay between me clicking the record button and the 2 second countdown beginning. Then following is then written in my /var/log/system.log:
Apr 23 09:19:56 screenflowrecorder: Camera resize: 800,600
Apr 23 09:19:58 screenflowrecorder: Camera resize: 1280,720
Apr 23 09:20:02 screenflowrecorder: Camera resize: 960,720
Apr 23 09:20:05 screenflowrecorder: Camera resize: 720,480
Apr 23 09:20:09 screenflowrecorder: Camera resize: 640,480
Apr 23 09:20:12 screenflowrecorder: Cannot set camera resolution.
Apr 23 09:20:29 ScreenFlow: CoreText performance note: Client called CTFontCreateWithName() using name "Eurostile" and got font with PostScript name "EurostileRegular". For best performance, only use PostScript names when calling this API.
Repeating the test once more shows the same:
Apr 23 09:22:35 --- last message repeated 1 time ---
Apr 23 09:22:35 USB Prober: USB Prober: USBDeviceOpen() failed 0xe00002c5
Apr 23 09:23:05 --- last message repeated 3 times ---
Apr 23 09:23:07 screenflowrecorder: Camera resize: 800,600
Apr 23 09:23:09 screenflowrecorder: Camera resize: 1280,720
Apr 23 09:23:13 screenflowrecorder: Camera resize: 960,720
Apr 23 09:23:16 screenflowrecorder: Camera resize: 720,480
Apr 23 09:23:20 screenflowrecorder: Camera resize: 640,480
Apr 23 09:23:23 screenflowrecorder: Cannot set camera resolution.
Apr 23 09:23:41 ScreenFlow: CoreText performance note: Client called CTFontCreateWithName() using name "Eurostile" and got font with PostScript name "EurostileRegular". For best performance, only use PostScript names when calling this API.
Apr 23 09:23:43 ScreenFlow: -writeToURL file://localhost/private/var/folders/19/9lf5c2c13nl1qf608zp62jpr0000gn/T/TemporaryItems/(A%20Document%20Being%20Saved%20By%20ScreenFlow)/Unsaved%20ScreenFlow%20Document%203.screenflow
Apr 23 09:23:45 mdworker: Cannot find function pointer MetadataImporterPluginFactory for factory 2CBD2771-5EE8-4623-9C95-7A275A28C255 in CFBundle/CFPlugIn 0x7fb710d13270 (bundle, loaded)
Apr 23 09:23:45 mdworker: (Error) Import: Could not create instance for plugIn 'file:///Applications/ScreenFlow.app/Contents/Library/Spotlight/ScreenFlow.mdimporter/'
Apr 23 09:23:45 mdworker: (Error) Import: BAD IMPORTER ~~~~~~~~~~~~~~~~~~ file:///Applications/ScreenFlow.app/Contents/Library/Spotlight/ScreenFlow.mdimporter/
And once more:
Apr 23 09:24:19 screenflowrecorder: Camera resize: 800,600
Apr 23 09:24:21 screenflowrecorder: Camera resize: 1280,720
Apr 23 09:24:25 screenflowrecorder: Camera resize: 960,720
Apr 23 09:24:28 screenflowrecorder: Camera resize: 720,480
Apr 23 09:24:32 screenflowrecorder: Camera resize: 640,480
Apr 23 09:24:35 screenflowrecorder: Cannot set camera resolution.
Apr 23 09:24:52 ScreenFlow: CoreText performance note: Client called CTFontCreateWithName() using name "Eurostile" and got font with PostScript name "EurostileRegular". For best performance, only use PostScript names when calling this API.
Apr 23 09:24:54 ScreenFlow: -writeToURL file://localhost/private/var/folders/19/9lf5c2c13nl1qf608zp62jpr0000gn/T/TemporaryItems/(A%20Document%20Being%20Saved%20By%20ScreenFlow)/Unsaved%20ScreenFlow%20Document%204.screenflow
Apr 23 09:24:55 mdworker: Cannot find function pointer MetadataImporterPluginFactory for factory 2CBD2771-5EE8-4623-9C95-7A275A28C255 in CFBundle/CFPlugIn 0x7fb098f21440 (bundle, loaded)
Apr 23 09:24:55 mdworker: (Error) Import: Could not create instance for plugIn 'file:///Applications/ScreenFlow.app/Contents/Library/Spotlight/ScreenFlow.mdimporter/'
Apr 23 09:24:55 mdworker: (Error) Import: BAD IMPORTER ~~~~~~~~~~~~~~~~~~ file:///Applications/ScreenFlow.app/Contents/Library/Spotlight/ScreenFlow.mdimporter/
(Original post continued)
Has anyone else had this problem? If so, did you resolve it? How?
I’d appreciate any help from the people in IPEVO or Screenflow. Please get in touch with me!
The Screenflow recording is successfully made, with 1) the screen of my computer, and 3) the audio from the computer but not with the video feed from the IPEVO camera.
How to reproduce the problem
- Open Screenflow
- Select “new recording”
- Screenflow source pop-up appears
- Confirm “record desktop from your colour LCD screen”
- Select “Record video from” checkbox and choose “IPEVO Point 2 View” camera from dropdown
- Select “Record Audio from” checkbox and choose “Built-In Input” from dropdown
- Click the big RED button to start the recording
I have Screenflow setup with a 2 second countdown: after clicking the red record button, Screenflow is supposed to immediately countdown 2, 1, and then begin the recording.
In the case of using the IPEVO camera, Screenflow waits for approx. 9 seconds, before it begins the 2 second countdown. I believe this is not expected behaviour and maybe be connected.
After this 9 second delay, Screenflow then begins the 2 second countdown as expected.
When the recording has been stopped, Screenflow then presents the recorded video. As can be seen in this test video, the IPEVO camera feed is not present.
When the captures video using Screenflow is played back, the IPEVO camera feed is missing.
This is the issue.
Need to discover
I need to find out what codec does the IPEVO camera use?
Any help appreciated!
Technical information about the set-up
some information about the machine I am using with Screenflow and the IPEVO camera.
Computer hardware info
MacBook Pro 13-inch, Early 2011
OS: OS X 10.9.2 (13C64)
Memory: 16 GB 1333 MHz DDR3
Graphics: Intel HD Graphics 3000 512 MB
Processor 2.7 GHz Intel Core i7
The computer identifies the IPEVO camera as:
IPEVO Point 2 View:
Product ID: 0x0204
Vendor ID: 0x1778
Speed: Up to 480 Mb/sec
Manufacturer: IPEVO corp
Location ID: 0xfd120000 / 4
Current Available (mA): 500
Current Required (mA): 300
Screenflow version: Version 4.5 (20888)
An excellent TEDx talk by Lorrie Faith Cranor 1)Lorrie Faith Cranor’s website on passwords used by users. It’s a combination of some of her previous research into passwords used by users.
Correct horse battery staple: Exploring the usability of system-assigned passphrases 2)Shay, Patrick Kelley, Komanduri, Mazurek, Ur, Vidas et al