Using Flask on dreamhost problems

We're updating our website here at Thought Into Design to reflect our firmer move into education. We wanted a site that discussed the kinds of things we're offering so that people know.

But a new design meant uploading a new site! And we had problems with Dreamhost and thought to document them here in case they're any use to anyone else.

Matt Carrier has a great page on setting flask up at Dreamhost that we used before for our Salstat page. All was going well until we had to install Flask itself with...

easy_install flask

...when our server told us that it could not be installed! Fundamentally, it could not find the flask package which seemed odd. We tried upgrading pip and setuptools but that crapped out too.

Searching for flask
Reading http://pypi.python.org/simple/flask/
Couldn't find index page for 'flask' (maybe misspelled?)
Scanning index of all packages (this may take a while)
Reading http://pypi.python.org/simple/
No local packages or download links found for flask
error: Could not find suitable distribution for Requirement.parse('flask')
(test.thoughtintodesign.com)[clayton]$ cd ../public/
(test.thoughtintodesign.com)[clayton]$ easy_install flask

Our solution was to change directory to the lib directory, then download and install pip manually like this...

lib/python2.7/site-packages
wget bootstrap.pypa.io/get-pip.py
pip install flask

...and Flask installed nicely.

Research trip to Singapore

We've just returned from a long research trip where we attended the Speciality Fine Foods Asia event in the Suntec Convention Centre in Singapore. We learned a lot of great things about the food and drinks market in Singapore (and south-east Asia!) and are developing the markets in the region for user research and UX design.

We're also planning some workshops in south-east Asia where we'll be training people to undertake UX activities such as research, design and usability testing. If you're interested in participating, you can contact us on alan@thoughtintodesign.com, Twitter at @ThoughtN2Design, or Facebook.

International research & conferences

I've been invited to give the plenary talk at the PSITE conference in Tacloban, Philippines. It is a real honour to present an outline of user research and user experience design to such an important group of IT educators and I hope I can reward them with a fantastic talk.

The conference is 19–21 October 2017 and I'll be there with my company, Thought Into Design, the whole time.

We're also planning on running some UX workshops / training sessions the following week whilst we're in the Philippines. I can be contacted at alan@thoughtintodesign.com if you'd like to know more.

My partner and I just returned from Singapore and the Philippines after doing some research for DIT. It was a great few weeks and we gained some surprisingly useful insights for this client.

Statistics Routines

In addition to work on SigmaSwiftStatistics, we're writing some statistics libraries for other languages.

We're a bit sneaky, because we find this a great way to get familiar with languages old and new, but it also provides a useful service for everyone else.

Currently, we're writing some routines in Ada to complement the Swift ones. You can get the Ada code here. We'll be creating a Prolog repository soon.

Consulting at the Department for International Trade

Thought Into Design Ltd is heavily involved with some research activities at the Department for International Trade (DIT). We're very excited to be collaborating with DIT on a range of research projects. We've already undertaken some usability testing and we're hoping to add our skills and knowledge to all the rest that the DIT has available.

This is coming very soon after our stint at helping the Office for National Statistics improve their Interdepartmental Business Register (IDBR), which is a register of 2.1 million UK businesses and fully compliant with the European Union regulation on harmonisation of business registers for statistical purposes (EC No 177/2008).

Trying out Swift

Lately, at Thought Into Design, we've been trying out Swift. This was partially so that we could write apps for iOS and OSX (or is that MacOS now?) but it is also good to learn the foibles of a new language's syntax.

Our most recent work has myself (Alan) contributing towards an open source statistics library called SigmaSwiftStatistics. It's been great fun so far and we've contributed a few descriptive functions (to be cleaned up and made better by the project's maintainer, Evgenii Neumerzhitckii) such as the coefficient of variation, geometric mean, harmonic mean, skewness, kurtosis, Hyndman & Fans 9 quantile methods and a handful of nonparametric tests like a decent mode routine and a routine to rank data.

The mode is more useful than, say, that found in SPSS because it reports not just the modal value but all the indices at which it occurs. It's been some years since I used SPSS, but when I did, I recall it only provided the first index of occurrence. Sometimes, it's useful to know everywhere that it occurs.

Anyway, we've been committing to this project and are sure you'll find it useful. It's in Cocoapods so it should be simple to use into a project.

Over the last few evenings, we've been coding up a routine for univariate analysis of variance (both within and between subjects). It's passed its initial tests (using ANOVA tables generated from SPSS) so the code is almost ready to go. We hope to get it committed sometime this weekend.

We're also keen to produce some decent nonparametric tests. When people write routines, there is a tendency to focus on tests for parametric data and tests for nonparametric data are the forgotten children. We've found nonparametric tests to be excellent in many real-life circumstances (heavily skewed or kurtotic data, no normal distribution, scales of less than 11 items if I remember my Nunally correctly) so we want to ensure they are included.

In the future, I would like to investigate putting a Swift wrapper of some kind conforming to BLAS so that a massive range of linear algebraic routines (often heavily optimised) will be available. When using Swift, I find I miss Numpy and SciPy, and a layer on top of BLAS would help bring some of that serious power over.

Here's to statistics on Swift!

Fast prime numbers in Python

I spent some time recently on Project Euler and got side-tracked by the efficient calculation of prime numbers. After using a brute force method (iterating through a range of numbers and trying to find their factors), I read around and found a nice page at http://rebrained.com/?p=458, I found a good Stack Overflow page at http://stackoverflow.com/questions/2068372/fastest-way-to-list-all-primes-below-n. These inspired me to try again and I came up with the following routine. It's faster than most but not as fast as primes6 on the first page I linked to when generating more than approximately prime numbers up to 350,000-400,000. Below that, nothing seems to touch it.

It's also different. It uses numpy (which is cheating, in a way) but does the job well. I like it because it seems more understandable once you've grasped that the routine doesn't do any division. Instead, it's pure sieve operations on a vector of booleans. Anything found to be divisible by anything other than 1 and itself is marked as False, and the routine finishes by returning the indices of True values - which are primes.

I've triangulated the results by summing them and comparing the sums against those of other routines and there's no differences I've noticed yet.

import numpy as np

from math import sqrt

def ajs_primes3a(upto):

  mat = np.ones((upto), dtype=bool) # set up a long boolean array

  mat[0] = False # remove 0

  mat[1] = False # remove 1

  mat[4::2] = False # remove anything divisible by 2

  for idx in range(3, int(sqrt(upto))+1, 2): # remove anything else divisible

      mat[idx*2::idx] = False 

  return np.where(mat == True)[0] # return the indices which are the primes

I'm quite pleased with this early foray into optimising a routine but there's work to do compared to prime6. What I like is that it has no division and instead seems to be a pure sieve and doesn't create a long list of numbers.

I tried other versions with a half-series so that anything divisible by 2 just wasn't considered, but what I came up with just weren't as fast.

Times (msecs, same machine, best of 3-6 multiple runs)

             10k      100k     500k     1m       20m
prime6       0.001258 0.002722 0.007229 0.001229 0.22388
erat         0.005414 0.059047 0.333737 0.673749 15+ seconds
ajs_primes3a 0.000360 0.001897 0.008540 0.016952 0.70135

Up to 100k, mine leads but prime6 takes over strongly after that. Mine doesn't lose too much ground, considering, so it's best to think of mine as fast-ish but nicely understandable. 

Crowd-sourcing research

One idea I had a few years ago was to use the various crowd-sourcing websites as a source of willing and cheaply-paid participants for UX research.

Wait, you fool! You cannot do an hour-long usability session like that!

Well, the keyword is reductionism. UX research is discovering brain and behaviour. It's psychology. And a few psychologists have already been using crowd-source sites as sources of participants. [1, 2]

The overall results are quite promising: It is possible to undertake such experiments with a crowd-sourced experiment sample. There are, however, precautions to be taken, and it's only fair to pay participants a decent amount if only to ensure a low drop-out rate and faster participation.

So it's not cheaper but it is faster. One study [2] said, "Performing a full-sized replication of the Nosofsky et al. [40] data set in under 96 hours is revolutionary." For UX research, it shows a wonderful promise for particular questions as long as the experiment is designed well.

But I also want to make sure that I'm dealing with an ethical company. In my new role as a research lead for Vodafone, there is a reputation risk to the company. This means that I've been participating in some of these sites as a worker to check out conditions from within. A lot depends upon the micro-tasks conditions; but company also have their own attitudes to workers which was taken into account. We will not work with companies that argue about or unnecessarily delay payments to workers; or use petty reasoning to 'trick' workers out of their money.

To guard against reputational risk, we will engage only those companies that treat workers with at least some respect.

I don't expect this post to make any waves, at least not amongst the crowd-sourcing sites, because our work is fairly small potatoes for them. But we are a large company with expanding requirements, and it's always good to remember that those on the bottom can also, with a slight change in context, become the one who pays the piper.

References

[1]   Paolacci, Chandler, Ipeirotis (2010) Running experiments on Amazon Mechanical Turk. Judgement and Decision Making, Vol. 5, no. 5.

[2]   Crump MJC, McDonnell JV, Gureckis TM (2013) Evaluating Amazon's Mechanical Turk as a Tool for Experimental Behavioral Research. PLoS ONE 8(3): e57410. doi:10.1371/journal.pone.0057410

Will UX exhaust itself?

When I first started in the field (originally doing usability along with some design), it was easy to make an impact. Just think of all those nasty 1990s websites with fundamental flaws that could remedied with a wave of a good developers hand? It was like that.

But now, the whole world is getting on-board with user experience and the upshot is that everyone is a little more savvy than they used to be. This in turn makes small-change-big-impact gigs far less frequent. UX is focusing increasingly upon minutia because that's where the benefits will be found.

But eventually, the law of diminishing returns will kick in and we will come to the point where UX talent will be employed for the quick wins and little else. Or perhaps even not at all.

Another possibility is that UX practitioners will increasingly focus on niche areas. "Hey!", they'll say. "You need someone to optimise a revenue stream from selling vintage astronomy books? Well, I've done vintage chemistry books which is much the... Oh, okay. So you think I haven't got the skills..."

I wonder if this might lead not so much to a contraction in the market, but rather a slow down? I can envisage companies saying, "Well, these are all UX problems but they're pretty much solved so let's hold off on that freelancer."

Excel for serious data analysis?!

Let's all laugh at Excel - sure, I do. When doing data analysis, it's
good for data entry but I'd hate to rely on it for anything serious.

But a while ago, I came across a good use case for it. I'm sure R
could do the same thing fairly well if needed, but here's a nice quick
and dirty method of exploring data sets with lots of variables.

What's the problem with lots of variables? Data analysts these days
are suppose to start drooling when they get more data but the reality
is that this makes things harder to see what's going on. The chances
are that the noise is outgrowing the data. Yeah, we can all be pompous
and promote ourselves by saying, "Hey, dirty data is what I live for -
so just get out of my way, I'm coming through" and other such macho
nonsense.

If we're really analysing data, at some point we want answers. So how
can we decrease the noise?

For an example, I'm going to look at an available data set from
SEOMoz. What they did was monitor a number of websites and their
Google rankings in response to various queries.

But to me in the task of trying to understand what happened here, it's
confusing. Models with this number of variables are probably going to
fail because the ability to discriminate a variable's effect will
often lower with the addition of a influencing variable - even if that
influencing variable is orthogonal to what we're measuring.

So my first job was to more clearly define my problem space by
reducing noise. I did this by correlating each variable with eath
other variable. This formed a nice square matrix of correlations, with
a diagonal consisting of exactly 1.0 (each variable correlated with
itself). By the way, I'm not looking at significance here so alpha
inflation is not an issue.

But this was still hard to really visualise. Visualising is a critical early step in almost any analysis process. It helps me develop a mental model of the data I'm going to be working with.

But here, Excel and conditional formulae came to the rescue. I figured
that if I could colour a cell according to the strength of a
correlation, I might be able to get a high level view of the data
which let's me focus on bits of interest.

So I copied out a conditional formulae which is probably useful for
any correlation matrix.

Then by making cells tiny, I could get a nice visualisation that
allowed me to identify groups of variables that appeared to co-vary
strongly (the darker bits)

I could look at these in more detail and decide whether or not to
delete them or keep them and simplify the data set somewhat. It was
helpful to go to others with a list of variables to ignore and tell
them to focus on replacements instead.

Of course, this is only a very small part of the story, but as a few
first steps, it was useful to reduce the noise.

Perfect job description and ugly companies

Picture this: You're searching for the perfect employee and your job description rocks. Everything is perfect -- or is it? Is your JD scoring the perfect candidate? Or have you scored an own-goal?

As a freelancer, I spend a lot of time browsing job adverts. Many are fairly anonymous, standard-text type affairs, but a bit of close reading can usually get some useful information even from these. But UX ads sometimes veer to the silly too.

One I read recently (I don't feel mean enough to link to it) did a superb job of 'selling' the company. If I believed what they wrote, I'd consider them to be a forward-thinking team of the best individuals on the planet.

Of course, we all know it's nonsense which makes me wonder why we persist with this type of strategy, but something else was nagging me. Then, it hit me. There was little about the job itself, what the successful candidate would be doing. Just many sentences of how they only every took the best.

And that company looked ugly to me

Seriously unattractive and slightly fake. Something like a salesman turning up to your birthday party and getting you to buy something from him. Or a insecure person desperately boasting about how great they were. Confidence is good but walking the talk talks louder than talking the walk.

Maybe I'm not good enough / not confident enough? Well, I get enough repeat work to know that I must be doing something useful for people. I have failures too, but these are learning processes we all encounter.

Is it because I'm scared of the challenge? 'Scared' isn't the right word. I've been in competitive fields for many years and I'm happy to compete and lose (and even win on rare occasions!) because it's a way to learn and be better. If I'm not periodically knocked back and picking myself up again, I'm not learning anything.

But this point is somewhat on the right track.

I wouldn't ever apply because the content felt like the company were putting up a huge wall between me and them.

The best challenges I've ever had are those that made me want to  try because I felt I would learn something even if I failed.

But this job description made me feel like I should consider myself honoured to read the advert, never mind apply. A speck of worthless, unproductive dirt like me could, at best, be granted the privilege of prostrating my pointless form at the feet of the almighty Company.

Well, I am being a bit harsh, but the job ad's hyperbole did make me feel like that.

And that's why I wouldn't apply. I'm happy to face challenges, but I want to get something worthwhile out of them: to learn something new for myself. I just don't find being invited to be a a faceless member of a faceless self-proclaimed elite to be attractive without knowing why they're elite. Just saying it is not enough.

So my advice if you're writing a job description is this: Making your company attractive isn't about selling it's corporate beliefs: it's about saying, or even better, showing, that you do cool stuff and anyone is welcome to come in and try and chat about work. Much like how my most enjoyable interviews as an employee were where I forgot myself just talked about my work like an enthusiastic child. The worst were where I felt I was being examined by a higher power.

Feel free to disagree. But as someone who has run a business, if I found that you wrote a job description that actually turned people off from applying, then I'd suggest that maybe you need some additional training.

SEO: Scraping synonyms from Wikipedia

Here's a Python script for scraping synonyms from Wikipedia. You provide the core keywords, and Python (plus the BeautifulSoup module) will get the synonyms.

The last article I wrote about getting SEO keywords from Wikipedia seemed interesting to people. The method was, however, manual, which takes time and effort to complete for more than a couple of keywords.

If you want to hurry things up or automate the process, below is a Python script which scrapes potential keywords from Wikipedia. If you’re going to be doing a lot of this, I’d be tempted to download a snapshot of the Wikipedia database and use that rather than downloading. This script is really intended for educational purposes or those who want to retrieve a very small list of synonyms.

The output is a CSV (comma separated file) that can be opened in a spreadsheet. I find LibreOffice much better at handling Unicode content from a CSV file than Excel and it’s a free download. Just don’t ask me how to import Unicode CSV with Excel!

Each series of synonyms requires a lot of cleaning but it’s easier than downloading it all yourself.

"""
Scrape synonyms from Wikipedia
"""

import urllib2
import BeautifulSoup as BS

# phrases go in here as a list of strings
# e.g., names = ['United_kingdom','United_States','Philippines'] looks for synonyms for the UK, US and the Philippines

names = ['United_kingdom','United_States','Philippines'] 

URL = "http://en.wikipedia.org/w/index.php?title=Special:WhatLinksHere/%s&hidetrans=1&hidelinks=1&limit=500"

fout = open('synonyms_test.csv','w')
for name in names:
    active_URL = URL%name
    print active_URL
    req = urllib2.Request(active_URL, headers={'User-Agent' : "Magic Browser"})
    data = urllib2.urlopen(req)
    stuffs = data.read()
    soup = BS.BeautifulSoup(stuffs)
    links_body = soup.find("ul", {"id" : "mw-whatlinkshere-list"})
    fout.write('%s, '%name)
    try:
        links = links_body.findAll('a')
        for link in links:
            if link.text != "links":
                fout.write('%s, '%link.text.encode('utf-8'))
        fout.write('\n')
    except AttributeError: # needed in case nothing is returned
        pass
fout.close()

A couple of things: this code needs BeautifulSoup installed. See their install notes on how to do this. What this module does is parse the Wikipedia page. The script then iterates through the names you’ve provided with scrapes a page for the first 500 links that are not transduction pages or just plain links. This reduces the problem space down to mostly synonymous re-directs which is what we want.

To run this script, you need to see line 11 and insert the phrases you want to retrieve synonyms for. Don’t leave spaces: replace them with underscores. The script also doesn’t check whether the phrase you’ve used is the canonical page either so that’s something you need to check for.

Once the script’s finished, load the CSV file into LibreOffice Calc (or some other form of spreadsheet that can load CSV files with Unicode), and delete anything that clearly isn’t a valid synonym for SEO purposes.

When that’s done, delete all the blanks and shift cells left (not up!), and you should have a spreadsheet full of nice synonyms that can enhance your SEO.

Happy scraping!

Some SEO tips keywords

Here's a quick tip to get keywords to improve your search engine optimisation (SEO) using Wikipedia - for free! Enter your term into Wikipedia. If it's a brand name, enter the product type (e.g., "handbags').

Click on 'Toolbox' to the left and then 'What links here', and you'll be shown a new page that details all inbound links to that page within Wikipedia.

Then, under 'Filters', 'hide' both transclusions and links so that only re-directs to the page are shown.

And hey presto! There's a nice list of synonymous terms with a variety of spellings.

For example, handbag comes up with:

Clutch (handbag) (redirect page) ‎ (links)
Manbag (redirect page) ‎ (links)
Handbags (redirect page) ‎ (links)
Man bag (redirect page) ‎ (links)
Man-bag (redirect page) ‎ (links)
Manpurse (redirect page) ‎ (links)
Hand bag (redirect page) ‎ (links)
Hand-bag (redirect page) ‎ (links)
Hand-bags (redirect page) ‎ (links)
Man purse (redirect page) ‎ (links)
👜 (redirect page) ‎ (links)
Evening bag (redirect page) ‎ (links)

whereas 'telescope' comes up with:

TeleScope (redirect page) ‎ (links)
Telescopes (redirect page) ‎ (links)
Perspicil (redirect page) ‎ (links)
Telescopy (redirect page) ‎ (links)
Astronomic telescope (redirect page) ‎ (links)
Telescopic observational astronomy (redirect page) ‎ (links)
Telescopically (redirect page) ‎ (links)
Astronomical telescope (redirect page) ‎ (links)
Ground telescope (redirect page) ‎ (links)

Prolog and UX Planning

Summary: Prolog is a logical programming language that can help craft perfect sitemaps and workflows by ensuring solutions meet all business and technical constraints. Here, I'll chat a little about Prolog and how it might be used, with more detailed information coming in future.

Part of Thought Into Design's work is natural language interfaces. Among the many tools we use is a language called Prolog. This is a logic language, quite strong on declarative style. It works by defining facts and rules and then asking queries. In some ways, it's how I envisaged computer programming to be, back in the early 1980s, before I ever programmed anything.

Examples of facts are:

man(alan).

man(tony).

woman(jell).

woman(ann).

These say (in order) that the atom 'alan' is a 'man', as is 'tony', whereas 'jell' and 'ann' are both classed as woman.

Rules determine how atoms relate to each other. Using the above code, we could define some rules thus:

human(X) :- man(X).

human(X) :- woman(X).

Everything classed as both 'man' and 'woman' is now also classed as 'human'.

With these in place, we can issue queries that tell us if a particular result is logically possible or not.

        human(X).

And we get a print out of everyone who is human. This is a very basic example and seems similar to a query language, but Prolog's power is in being able to infer relationships from what it's been told.

Prolog could be quite useful when crafting sitemaps and doing workflows, more so for the larger and complex sites rather than simple ones. There are often times when several different business rules need to be accounted for and the more complex the rule-set, the harder it is for a designer to navigate through them.

Prolog, or other logic languages, might be a way to help determine if particular sitemaps and workflows are valid solutions to problems or not.

My ideas are quite unformed as yet and this is something I hope to return to soon so watch this space!

Twitter Bootstrap for Responsive UX Design

Summary: We redesigned a website to be responsive using Twitter Bootstrap and JQuery to create design documentation. Bootstrap proved to be an effective tool for conventional interactions but less use with more complex stuff.

One task we've done lately has been to redesign the Thought Into Design site. It's quite boring and uncommunicative and the analytics suggest that there engagement can and should be better.

The broad business requirements are:

• Offer a client list
• Explain the types of work we do
• Show work samples
• Improve the user journey to contact us

After some initial planning, we decided to try out Twitter Bootstrap and frankly, it was a nice experience. There is a short summary of using Bootstrap with real clients which is well worth a read.

What we found was that it is an incredibly quick way to code some static pages up (HTML / CSS / Javascript) and was quite an enjoyable way to code after years of trying to get DIVs to fall into the right place. In some ways, it reminds me a little of table-based coding (and yes, I'm old enough to remember when virtually all sites were done that way!) so I have reservations. Fundamentally, coding is done by defining rows and then the number of elements (from 12) in each row. You can see the redesign in progress here: see the redesign in progress. Plus, responsiveness is baked in.

But after over a decade of doing wireframes, responsive design quickly muddies the water and increases the workload significantly for designers. Instead of a single set of wireframes, we now need to produce them for web, tablets and phones of various shapes and sizes.

Curiously, I remember being pooh-poohed a few years back when I suggested coding alternative CSS sheets for small screen devices like the Asus EEE netbook and was told that only web would ever be needed now. This was just before smart phones...

As an agency, we're happy to do what ever work is necessary to achieve the client's business goals. But it's also inefficient. What about if we could just skip the wireframing process and move directly onto working prototypes as documentation? This is something I've done before, particularly with complex interactions that needed to be tested dynamically, but coding was always a slow process. Bootstrap and JQuery have made the coding process a doddle now. I can see a future for designer-orientated tools that  handle this with less code and more visual creation (I'm thinking if there's a product to be made here).

Major advantages are:

• Passing off working code to developers that documents the workflows and interactions within itself. 
• Reducing time spent documenting interactions statically when a working prototype will do it better
• Communicates the interactions to the stakeholders better

But it's not all roses. Going direct to code, for me personally, hinders the creative process. I need to have some aim before I code must like if I'm writing a web application, I need to spend time planning long before I write a single line of code.

In addition, while it can be instructive to be shown capabilities beyond my reckoning, I also need to be able to think / ideate beyond the capabilities of software. One example is how to communicate complex information using dynamic graphs / charts, and Bootstrap won't handle those complex interactions. For the simple, bread-and-butter stuff, Bootstrap is a superb tool. I will still run to my sketchpad as a first option,

Disadvantages are:

• Might hinder the creative process
• Doesn't help initial ideation
• The working code might not be up to par
• Deals poorly with widgets outside of its reckoning
• Reinforces the idea that UX is about code

In Conclusion, Twitter Bootstrap is a very useful tool particularly for standard, conventional interactions. For example, planning forms with normal widgets. The resulting code is superb documentation for stakeholders, users (testing / research) and developers / testers. Less orthodox interactions, however, require a different framework for now.

Wireframing with LibreOffice

Given the mass of excellent wireframing tools, does FOSS software offer a cheap and ethical alternative? In this article, LibreOffice's Draw component gets tested for real work.

I'll admit it: I'm not sure whether I should be using OpenOffice.org, LibreOffice or whatever. For this, I used LibreOffice.

My relationship with this monster package goes back some time. I recall using Star Office when it really was Star Office; and build 638 of the newly released OpenOffice as it was back then. I think this was late nineties / early 2000s or thereabouts. Either way, it saved me when a small file I'd saved with MS Word at work refused to open and caused Word to crash on many machines. I copied the file onto floppy and opened it successfully with OpenOffice.org, saved it under a new name and it then opened fine under Word. Since then, I've been a bit skeptical when people criticise it for it's lack of ability to open MS Office files when MS Office can have a hard time.

But how does it do for basic Wireframing? I'm thinking about the static stuff here, just plain documentation, waterfall / throw-it-over-the-wall style rather than something interactive.

So far, it's done well for me. I've done a reasonably complex project here at the Economist Intelligence Unit, and managed to create wireframes for some already new pages and some already existing pages (entry points into the new pages). All were done using the 'Draw' component.

The benefits are:

Easy export to PDF, HTML and SVG along with a range of other formats. The HTML and SVG is useful because it can be easily displayed in a browser for testing and research, particularly remotely.
Multiple pages handled easily - this alone is a step ahead of Illustrator particularly when trying to stitch several PDFs together: LO provided rather a booklet.
Custom page sizes - page sizes can be specified in pixels too which makes things easier.

Drawbacks:

It's still hard to design fluid layouts. Personally, I find HTML to be just the best thing for this rather than relying on a graphics program.
Exported PDFs don't look that good. I cannot put my finger on this just yet but something seems inferior quality.

Inkscape for UX design

I know that suggesting an open source tool like Inkscape for a design where Illustrator is thoroughly embedded comes across somewhat like recommending a typewriter to a blogger for writing but having used it lately, I'm quite impressed.

This is a part of a series about UX design with open source tools but just a quick overview rather than a detailed review. There are many reviews out there so I'm just going to concentrate upon the things I found that might be of interest to other users.

Inkscape's interface is very different from Illustrator, and for many this is a failure. Despite us often suggesting new ways to do things, we UX designers can sometimes be stuck-in-the-mud when it comes to changing our own tools or workflows. Given that my first experience with vector graphics drawing programs was DrawPerfect (on DOS no less!), I can some experience with different interfaces so I'm not so phased by Inkscape.

What I did find useful was being able to export to SVG which could be made (with a little JQuery coding) quite interactive. I found that I was able to design a graphic, export it to SVG (Inkscape's native format) and show it directly in a web page. I could also add interactivity with hyperlinks, mouse overs and the like which made it not just a good tool for designing mockups, but also a good way to develop both interactive prototypes and even finished pages. One I did required maybe 20 lines of html code and a series of if... else if... statements to show something when a link was clicked.

Well, maybe not so much finished pages - layouts were distinctly un-fluid and un-responsive-designish; but they certainly worked well enough to display in the wild.

There are a few rough edges but it's still a surprisingly powerful little program. I'm sure that Illustrator priests will miss various features but I really like the idea of an open source alternative that uses an open web standard graphics format that can be shown directly in a browser and made as interactive as possible with little code.

DuckDuckGo Sugar and Gold

Just in case you don't know, there's a search engine called Duck Duck Go (apologies to Gabriel and team if the spelling is incorrect!). I've been using it for a while now and even had a rap with the founder Gabriel Weinberg about this time last year (my Ph.D. thesis was on search engine usability).

One reason I liked it enormously was that it returned results with a very high precision. In search engine terms, this means that there were few non-relevant results. The other core measure is recall which is the number of sites returned and a third measure, accuracy, which is a function of recall and precision. This gave me quite a cheer.

The second reason I liked it is that my own personal sites do well in ranking: Searching for 'freelance user experience researcher' shows alansalmoni.com as number 1!

But something else happened that makes me want to spread the love. I was rushing up a design for a new resume (a cross between the traditional resume and an infographic - I have no idea if it will work well!) and I needed some filler text. As a part of my experience to rely upon open source software for design, I did the whole thing in Inkscape which worked out really well but the function that created random text wasn't working.

I went to duckduckgo and searched for lorem ipsum - and got a page of filler text in return!

This was a great time-saver for me and another reason to continue using Duck Duck Go.

UI Interfaces

UI Interfaces, a set on Flickr.

A regular update of my latest user interface designs. These come from various sources.

The Web's visual language

Current interactions are far more complex than they used to be and will probably get even more tricky. However, the interaction language we use is finding it hard to cope.

This redesign I've been doing for Analytics SEO is coming on well but one thing about this and many previous designs has been nagging me.

When I first used the Web in 1994-5, interactions were simple. Links were (generally) blue and underlined and went to a new page. A button submitted a form. Form elements worked more-or-less as on the desktop.

But current interactions are far more complex. Take the live edit type interaction as seen in Basecamp. Here, an active element (most often text: in this screenshot, it's a date) shows an overlay when clicked on that allows the user to change the element. It's a very nice piece of interaction that helps do away with separate "edit" screens and server-side lags.

But this type of interaction differs from the classic click-on-a-link-and-open-new-page-in-this-window. It's all client-side so quick. From my experience researching non-technical users, some might miss this and instead opt to wait for the page to reload. Yes, this is possible - I've seen it in testing and it feels embarrassing for participants to wait only to be shown they got the interaction wrong even if it's not their fault.

But we do not communicate the different interactions to users. If I see a link, I have no way of telling whether a) this opens a new page in the current screen, b) this opens a new page in a new screen / tab, c) this opens an overlay, d) this sorts a table's column client-side, e) whatever else might be expected.

Most people seem to muddle through okay but, as I've found, some people just don't. This, I cannot help feeling, is a significant shortcoming of our field. We make these things. If otherwise intelligent people don't understand them, we have a degree of failure to our work.