Slides from DDDEA on “What Developers Need To Know About Visual Design”

Some notes from two attendees taken during the presentation:

Why do round avatars look better than square avatars?

Since there introduction the usage of round avatars has always been a controversial topic, like marmite, seems people either love them or hate them. I for one welcome them but I’ve always wondered why? Is it just personal preference or was there an underlying reason.

To understand this I started to look at how other websites approach avatars. Twitter for example has taken an interesting approach as it’s not fully committed to round avatars but it does have a very slight roundness.

Twitter with slightly round avatars

Twitter with slightly round avatars

While the roundness is subtle, without it timeline looks very different and quite jarring (definition: “incongruous in a striking or shocking way; clashing.” Incongruous: “Not in harmony or keeping with the surroundings or other aspects of something”)

Twitter with square avatars

Twitter with square avatars

To make it a easier to spot, here is a side-by-side comparison.

If we use the same style as Path or Dribbble then, for me, the avatars feel more natural, easier on the eyes and are more aligned with the rest of the interface.

Twitter with round avatars

Twitter with round avatars

But why?

After some research it turns out we’re pre-programmed to prefer rounded corners. As children we’re quickly taught that sharp corners are dangerous and hurt but rounded corners are safer and friendly.

Another reason is that the flowing nature of a circle and rounded corners take less cognitive effort, or brain power, to visually process. The less brain power required the easier user interfaces are to use, as described in the book “Don’t Make Me Think”.

Finally, the box appears to make you focus on the outline instead of the content inside. By using rounded corners the brain is less distracted and as such we process the important information.

How does this look in reality? With Missing Unicorns I originally had everything as a square but I wasn’t happy with it.

Missing Unicorns - Square version

Missing Unicorns – Square version

By taking into account why rounded corners look better for users I made a number of modifications as shown below.

Missing Unicorns - Round Version

Missing Unicorns – Round Version

The changes include:
1) A subtle roundness added to the outline of each person’s panel to draw attention inside.
2) The avatars are rounded to reduce the processing, especially considering the number of them on the screen, and to draw focus to the face.
3) Changed the social network connected icon to make it softer.

Personally, I’m much happier with this approach but really want to hear feedback from you. Sign up for a private beta test at http://www.missingunicorns.com/

Finally, I’m looking at building a new tool focused around Product Design and UI/UX. If you’re interested in hearing more and would like to be considered for beta testing a new product then sign up below:


Implementing Twitter Cards for WordPress and Ghost blogs

Twitter cards are everywhere but I realised I hadn’t added them to either of my blogs, Ben Hall and Missing Unicorns. There are two main categories of twitter cards, one is free and based on metadata to provide context to a link while the others can be classed as lead generation cards that allow you to collect email addresses and twitter handles when the user submits a button. The metadata card is free, the lead generation card are paid ad campaigns. In this post I’m just focusing on the free version.

The documentation for the cards can be found at https://dev.twitter.com/docs/cards and works in a very similar way to Facebook’s Open Graph. Twitter tells us “Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers.” Sounds sensible, let’s do that.

Twitter offers 7 different styles of layout depending on the contents requirements, in the case of a blog the summary style fits most requirements.

Card Validator | Twitter Developers

The Data Attributes

For the summary card there are only three required attributes:
The card type                <meta name=”twitter:card” content=”summary”>
The card title                 <meta name=”twitter:title” content=”Did you miss my recent announcement? Missing Unicorns didn’t.”>
The card description      <meta name=”twitter:description” content=”Recently I mentioned I was “between startups”, a situation that lasted five days. From my experience of hiring this is an all too common occurrence. By the time you hear that someone is looking for work they’re already gone – the situation is almost as bad as flat hunting in London.”>

The other parameters are optional, but the chances are you would want to include as they help the card feel more complete and polished.
Site’s twitter handle                   <meta name=”twitter:site” content=”@missingunicorns”>
Author’s twitter handle               <meta name=”twitter:creator” content=”@ben_hall”>
The domain name of the site     <meta name=”twitter:domain” content=”MissingUnicorns.com”>
An image for the blog post         <meta name=”twitter:image:src” content=”http://placekitten.com/250/250″>

Adding Card to WordPress

To include the metatags on a WordPress blog you can either include the attributes manually or use the plugin http://wordpress.org/plugins/twitter-cards/. When I attempted to use the plugin it required FTP functionality which was more effort than I wanted so was dropped.
If you manually edit the theme by going to the theme editor in the admin console then you can start tweaking the raw PHP. The file header.php contains the all important <head> block where to include the above tags.

In order to render content related to the page in question we need to understand a little more about WordPress’s API. If we take this blog post as an example:

http://blog.benhall.me.uk/2014/03/job-boards-are-the-past-its-time-to-rethink-recruitment/

The ideal meta data would look something like this
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:title” content=”Ben Hall&#039;s blog – I don&#039;t know darling, I&#039;m doing my work”>
<meta name=”twitter:description” content=”Job Boards Are The Past! It&#8217;s Time To Rethink Recruitment”>

Thankfully, there is already existing tags containing that data so it would just a simple case of copying the php code
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:title” content=”<?php bloginfo(‘name’); echo ” – “; bloginfo(‘description’); ?>”>
<meta name=”twitter:description” content=”<?php single_post_title(”, true); ?>”>

After saving the page all blog posts on WordPress will have the correct metatags for twitter cards.

Adding Card to Ghost

At the time of writing Ghost doesn’t have any plugin support meaning the only option is to manually modify the theme.

The file you’re interested in is default.hbs which lives within content/themes/casper of the deployment.

In a similar way to WordPress, we need to add the tags that will display the correct information for each individual post.

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:title” content=”{{@blog.title}}”>
<meta name=”twitter:description” content=”{{meta_title}}”>
<meta name=”twitter:domain” content=”http://missingunicorns.com/blog”>
<meta name=”twitter:site” content=”@missingunicorns”>
<meta name=”twitter:creator” content=”@ben_hall”>

This would produce the following

<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:title” content=”Missing Unicorns Blog”>
<meta name=”twitter:description” content=”When was the last time you asked ‘Why wouldn’t I use my product’?”>
<meta name=”twitter:domain” content=”http://missingunicorns.com/blog”>
<meta name=”twitter:site” content=”@missingunicorns”>
<meta name=”twitter:creator” content=”@ben_hall”>

Now, we just need to tweet and link and it should all work nicely.

It’s broken! Nothing shows up when I tweet a link

Yep, I thought I had done something wrong. In fact, all cards need to be approved by twitter via the Card Validator. Turns out this is also a great way to test your meta tags without needing to tweet links to your site.

Approving Cards

The validator is very simple. Given a link to a tag with the tags, it will parse and render the card as if it was in the twitter timeline. Once you’re happy, you submit it for approval.

Card Validator | Twitter Developers-3

Once you’re happy, submit the example URL and your twitter details for approval. The confirmation says Twitter’s turnaround time is a few weeks for approval but both of mine were done within a matter of minutes and how showing in a twitter stream near you at @Ben_Hall and @MissingUnicorns

When was the last time you asked “Why wouldn’t I use my product”?

I’m a strong believer that founders need to truly love the problem and community they’re building their startup around.

This passion is what translates into the product vision that users fall in love with. Dattch and Robyn are a great example of this. Robyn’s passion is visible in every talk, interview and pitch she does which is expressed in how the product approaches the problem. The community believes what Robyn believes and as such they love the product! Others have tried to solve the same problem but potentially without the passionate for the user base they couldn’t make it work.

“As soon as we build something, we all tend to move increasingly from inquiry mode to advocacy mode at the very time where the former is needed and the latter can blind us.” Techcrunch

However, passion only gets you so far as you still need to execute. When you’re putting every living and breathing moment into the product it can become harder to see the bigger picture and the journey the user sees.

Missing Unicorns built from my own experience of identifying which designers and developers I could hire. While I was passionate about the problem and the product was functional I knew something felt wrong, the hard part was identifying how to start fixing it.

Given it’s easy to gain traction once you have started something, even if it’s wrong, I simply asked myself “Why wouldn’t I use this?”. I picked up a shiny sheet of A4 paper, looked at the dashboard and started to rip apart my “beautifully” created application which turned out to be surprisingly easy.

The use-case of “Find me the best designer to hire” was a problem I knew the product had to 100% nail so this felt a good place to start. I tried to solve this problem with a highly critical user mindset and proceeded to write down everything that felt wrong or stopped me. My initial list included notes like:

  • “Timeline sucks. Too noisy with rubbish”
  • “Too hard to import people. Who should I even be importing?”
  • “Want to add notes after importing”
  • “Changes identifed are boring”
  • “People/Dashboard needs search. Still too hard to find / know who / why you care about them”
  • “Discovery page needs filtering. How can I even find people I know”

“MVP is not an excuse to make shitty software” 12spokes

Looking at the list it was clear – the product was broken. Terms like boring, rubbish, too hard are things you never want to see but I knew what required fixing.

With a number of small tweaks, a few touches here and there the product started to have the connected feel and togetherness it previously lacked. I repeated the process with the updates, asking myself the same question, “What’s stopping me from finding the best designer?”. This time the list looked very different.

  • “How can I identify who are designers, who are developers, who are both”
  • “After importing, need ability to add a note”
  • “After adding, have suggestions of others”
  • “Identify tags for people”

A fairly obvious oversight of not splitting out the two skill sets but the rest had become nice to haves. I had stopped writing sucks, too hard, boring and my tone became much softer. It was clear I had begun adding features and not solving the problem.

Once all you’re doing is adding features then it’s time to stop and let the users to break it. If you want to be one then subscribe to the mailing list below


Cross posted to http://missingunicorns.com/blog/when-was-the-last-time-you-asked-why-wouldnt-i-use-my-product/

Job Boards Are The Past! It’s Time To Rethink Recruitment

Let’s be honest, job boards are dead!

A job board represents an old and traditional approach to recruitment. It’s the same as putting a card up in a newsagent’s window hoping that the person you want will instantly walk past and notice it.

The reality is that the adverts are lost in a sea of other ads each one shouting for the same person’s attention.

The use of newsagent’s windows has all but disappeared and replaced better solutions. Yet we still appear to be continuing with the same mentality when it comes to recruitment.

We need to rethink how we approach technical recruitment

Instead of pushing job specs out in a “spray and pray” style we need to use a strategic and tactical approach for recruiting the best talent and pulling them into the company. Missing out on the best talent can kill companies.

A pull approach uses a person’s connected network to identify who’s a potential hire. When combined with a team’s network you can easily visualise relevant connections to your company allowing you to start taking a targeted approach to hiring. If half of your development team already know the same person then the chances of them being a great fit is much higher.

With a short-list of talented people who already have a connection to your company, you can make the all important introduction. Because you used your network to identify the person you can find a warm intro. You also know their interests and skills-set meaning you can write a personalised email instead of the generic “You write code, I love you, can we chat?”.

No longer do you need to pay for job boards hoping someone will apply. You no longer do you need to email everyone asking “Who do you know who’s available” with slight air of desperation. Simply connect your networks, browse who’s a good fit and speak to them in a personal and engaging way.

Missing Unicorns makes the pull approach to recruitment a seamless experience and finally solves the problem of who to hire. If you’re interested in an invite to the private beta then please enter your email address below.


Cross posted to http://missingunicorns.com/blog/rethinking-recruitment-pull-instead-of-push/

Did you miss my recent announcement? Missing Unicorns didn’t.

Recently I mentioned I was “between startups”, a situation that lasted five days. From my experience of hiring this is an all too common occurrence. By the time you hear that someone is looking for work they’re already gone – the situation is almost as bad as flat hunting in London.

Demand for anyone attached to startups, especially developers and designers, in London is extremely competitive which makes recruitment a constant battle. With the competitive nature of the market it’s extremely important to be on the ball and act quickly when people become available.

The role of a great in-house recruiter can help with this, building relationships talent who could potentially fit the criteria of the team. Having this person also gives the company an unfair advantage as they’re in the perfect position to identify subtle hints that a person might be considering leaving their current role. In my scenario there were two key updates that reflected my new position before the blog post.

The first change I made was to update my twitter bio to be more generic. While someone changing their twitter bio doesn’t mean they’re looking for a new role, it could be an early indication of someone getting their house in order. The second change I made was updating my LinkedIn profile. With this a good recruiter / company had 3-4 days lead time before it was common knowledge.

However expecting a person to identify these subtle changes is unrealistic. This is where Missing Unicorns saves the day. At the heart is a system watching for these types of changes, these tweaks and early indications that someone is getting ready to move on. If you’ve indicated they could be a potential hire, when we detect certain changes then we’ll alert you via email.

Missing Unicorns Email Alert

This alert allows you to start being ahead of your competition instead of missing out.

Missing Unicorns isn’t just about predicting job changes. It also watches for new projects, skills and their latest work to help you build a deeper understanding of current topics, approaches and influencers within your network allowing you to be at the top of your hiring game. If you’re interested in hearing more and access to the private beta of Missing Unicorns then enter your email address below