4
Feb
2016

The Horrors of Enterprise Software

by Roisi Proven

Picard

No, not that Enterprise

When working on any large project, 3rd parties are inevitable. We have worked with companies of all shapes and sizes, from two-man startups to internationally recognised names.

Of course, I don’t have an issue with enterprise companies. I wouldn’t have a job without them. Without the juggernauts driving industry ahead, there’d be no infrastructure for companies like Red Badger to come in and disrupt. However, Enterprise software with a capital E is a different story.

When we’re investigating potential third parties, it can be a never-ending stream of information that becomes quite overwhelming. Yet, we more often than not champion the David over the Goliath. We’ll fight for open source even when working with huge multi-national organisations. So why do this, instead of signing up for packages tied in a neat little bow?

1. Jack of All Trades, Master of None

When looking for new partners, we’re often looking for them to do something specific. For instance, we might need a service that gives us insight into site performance while conforming to certain other metrics. We need a specific product for a specific problem.

With Enterprise software, you’ll probably find a piece of kit that does what you need. However, on top of doing what you need, it’ll also do 73 things that you DON’T need. You’ll undoubtedly need to pay top tier prices to get the element of the software that you want to use, but will then end up also paying for (and supporting) 18 squaddlybits, 7 BRAND NEW doodlybops, and 8 hours a day of dedicated emufarts.

Adobe in particular excel at this, as any designer well knows. Sepia toning, anyone?

photoshop

 

2. They’re Expensive 

I get it, these are multi-billion dollar ventures. They make their money selling big companies big software.

However, paying for so much unneeded functionality can sting even the most affluent companies. For every base level charge, there’ll be a service charge or per user expense. One piece of software will cost you thousands upon thousands of pounds every month. The idea is that because it “does everything” it’ll be the only piece of software you’ll ever need.

However, I’ve yet to experience working with a company where one piece of software truly does everything they need. They’ll have two or three of these unwieldy Enterprise solutions all daisy-chained to one another, only working together through sheer force of will. Which brings me to the next point:

 

3. They’re complicated

Want the button the lets you view the price history of an item? Well of course, you simply need to: 

  1. Open the software

  2. close the 8 error windows that have been popping up for 6 months but IT have told you not to worry about

  3. find the “fancy buckets” window. Doesn’t mention items in the name? It’s ok, just go with it.

  4. In the fancy buckets window, click on the “no detail here” tab

  5. Within the no detail here tab, find the “exclude items with no detail” tick box. It’s under the box that says cheese.

  6. go BACK to the fancy buckets main window, which will now look entirely different. Beside a drop-down menu that has nothing in it, there is a button that simply says “Why?”

  7. Within Why?, you will find the price. but don’t touch any of the fields, because you’ll end up back at the fancy buckets window.

When software does “everything”, good UX has a tendency to go out the window. With high-paying, high-power clients, you give them what they want. Because different companies want different things, you end up with a Eshceresque nightmare of seemingly randomly-named fields and buttons. They all made sense when they were being built, but they have no context as part of the bigger picture.

 

4. They’re Impersonal

When you rely on one system to do everything, it essentially means you have one giant point of failure. No matter how obscure or complicated your problem, it will largely end up being dealt with by the same support team. While their knowledge of the product will be deeper than yours, they can’t possible know it inside out. So change will be slow, and often painful. Unless you’re paying top dollar, you won’t be able to get a bespoke build that fits to your requirements. Instead you get Frankenstein’s monster. It all holds together, and it works, but a lot of time will be sunk into keeping it working, and learning how to navigate around the various quirks.

 

What’s the Alternative?

There’s a reason that Enterprise software continues to be a successful, profitable business model. They’re seen as the only way forward, and once you’re locked into a build, it’s very hard to extricate the business from it and onto a new platform.

Hard, but not impossible. Increasingly there are smaller start-ups offering a sub-section of what the behemoths do, at a fraction of the price. They find the niches that people buy into Enterprise software for, and they fill them specifically and efficiently.

It may mean you have more partners to juggle, but you also have better accountability and more distributed risk. Give a chance to a company in its infancy, and they’ll support you with a fervour that you will never get from the big dogs. 

There are of course risks with this approach, as there is with anything. The startup landscape is ever-changing, and ruthless. The company you support could go bust. They could also become so successful that one of the Enterprises swoops in and buys them, gobbling up their niche into simply another feature of the ever-looming Enterprise.

However, the rewards can often outweigh the risks. You can progress faster with a smaller company, and innovate far more than you can within Enterprise. By taking the leap with fresh, new tech you can stay ahead of the curve.

 

——-

Fancy working at a company that believes in taking risks and constantly innovating? We’re hiring!

29
Jan
2016

Advanced React Course

by Anna Doubkova

Last week I had the great opportunity to join a group of React-enthusiasts at a course ran by Michael Jackson and Ryan Florence. 

 

ePQr9sK (1)

 Michael Jackson at React London meetup.

 

I had previous knowledge of React basics but I thought it would be good to get a bit more in-depth understanding of how this framework works and what way it can be used. As we all probably know by know, learning a new framework is always tricky. No matter how many amazing online tutorials we read and cool videos we watch, we can always use a bit of personal advice. Otherwise we can end up like this kid when we think we got it and by the time our app seems safe to release, we realise we didn’t get it at all:

 

The compulsory gif – courtesy of thecodinglove.com

Who Ran It

Unfortunately Ryan didn’t make it all the way to the training due to misunderstanding with a customs’ officer and different definitions of “work” in terms of visa. That left Michael doing a job of two people at once and I must say he managed with flying colours.

Michael Jackson (who started the training by saying “no I’m not dead”) has a great background for giving this sort of a course. Having contributed to a number of great JS libraries and created React Router, he not only knows how to make things work. He could tell us “why” things should be done in certain ways and where the main strengths of React lie – and that’s something one normally doesn’t get from online tutorials or self-study hackathons.

What It Looked Like

I expected two days of listening to how React works, a lot of theory and maybe a little bit of coding. I was pleasantly surprised to find out that assumption was wrong. Michael’s course was amazingly prepared in detail, including 14 chapters of lectures (that we could code along with), exercises, solutions, and hints to lead us through the journey of getting solid understanding of React. The interactive lectures gave us a great opportunity to get a hands-on practise and exercises helped us gain the confidence that we can use these principles in our own day-to-day work.

What I learnt

As a developer who’s obsessed with performance, I really loved learning about rendering optimisation, especially when displaying a huge amount of data. Mobile developers have this covered by UITableView but we need to come up with our own solutions on the web. Rendering just what you see at any given moment using less than 100 lines of code seemed pretty magical!

Another bit that I found really interesting was covering data flow. I’ve been using Redux and Flux previously but never really understood the underlying principles. Thanks to this diagram, a great lecture and a step-by-step exercise, I finally understood why it’s such an amazing idea.

 

Courtesy of Facebook

 

It’s simple (even if it takes a little time to get intuition for the whole process) and effective, and that is one of those things all programmers love.

Last but not least, we tried animating things with the Motion library. I was sad not to be able to try it out on an older Android phone to get a feeling how useful it could be in production where you have to support all sorts of crazy devices and browsers, but playing with animation is always nice, and somehow this joy increases when I code just to see how things work and not to solve a “real world” problem.

The End

I suppose all that is left to be said is – it was awesome! I wish the difficulty level was a little higher so I could learn more but I do appreciate it’s difficult to balance this out in such a varied group of developers. It was fun to speak with the other trainees, see how very different experiences we can have while using the same piece of technology. (Not to mention the procrastination recommendations we exchanged such as 2048.)

Besides, attending this sort of training isn’t here for us just to learn new things but also to support the creators of open source code and their amazing products. I’d definitely recommend everyone to join in one of these.

Red Badger runs a React User Group in London, sign up here for updates on our next meetup.

19
Jan
2016

London React Meetup – January 2016

by Jon Yardley

 IMG_0114

Christmas is over and New Years resolutions have been made (and/or already broken?) but regardless of the sub zero temperatures, 250 developers flocked to Facebook’s London HQ for the first London React Meetup of 2016. This month’s topics covered React Native, Redux, testing with React & declarative coding with React.

With pizza consumed (110 in total) and beers in hand, our very own CTO took to the stage to kick things off. 

Jani Eväkallio, Futurice

Actually Building Things In React Native

IMG_0106

Jani took us through his personal experience at using React Native to build production apps for clients. In a nutshell, Jani informs us that React Native is in a good place and although there are still a few issues you might hit upon is ready for production. Sixty frames/second is apparently easy achieve however more complex transitions might need some tweaking.

He also tells us that it is pretty simple to implement an unsupported native API of 3rd party component even with little to no knowledge of Objective-C. This talk most certainly made me want to kick off my own React Native project! Check out the talk here:

 

Oliver Woodings, Qubit 

Are you suffering from Selenium-itis? 

IMG_0126

Oliver’s talk covered the ways in which we currently test UIs with React and offered an alternative approach to implement end-to-end testing using Qubit’s open sourced react-driver.

React driver aims to eliminate flaky service timeouts by hooking into your React application using selectors and allows you to use whatever test framework you prefer. As a nice addition it will ‘automagically’ install selenium-standalone for you so you don’t have to go through the pain of trying to do it yourself.

Check out the talk here:


 

Jonas Ohlsson, State  

Using Redux – a case study

IMG_0147

Redux is the next evolution of Flux and comes with dramatic productivity benefits. Jonas covered the Redux way of doing things, demonstrated how he’s using it on criticalcss.com, a product he built recently and explained what he’s learned along the way.

Check out his talk here:


 

Michael Jackson

Lightning Talk – react-stdio

IMG_0155

With Ryan unable to make the event Michael took to the stage to deliver an engaging talk on how to write (or re-write) components so that they are way easier to reason about. This uses a really simple app that generates simple and more complex sound waves.

Interestingly he creates components that didn’t render any visual UI but generated sound using the WebAudio API. As he pointed out, for internet users who are blind or partially sighted, audio is their main or only UI when using a browser. In addition, these audio components allowed him to quickly iterate on the application during his live demo.

Check it out here:


Thanks to all the speakers for an engaging and educational evening. Also thanks to Facebook for hosting and Alex Savin for the great snaps. In my opinion it was one of the best meetups so far!

The next meetup will be happening in February so keep you’re eye on twitter @londonreact for updates as I am sure you’re well aware they go super quick.

11
Jan
2016

ToAsTieS

by Jack Vickers

Here at Red Badger we often talk about being proud of our culture, and a defining part within our culture is the mighty toastie. YES that’s right; not that you’re surprised of course. 

The toastie is another word for happiness for fellow badgers, most of us like a good toastie; who doesn’t? 
 
Who would have thought the toastie has a history dating back to the 1920′s. I wouldn’t be surprised if there toastie historians nowadays, here’s a brief overview – cooked bread and cheese is an ancient food, according to food historians, popular across the world in many cultures; evidence indicates that in the U.S. the modern version of the grilled cheese sandwich originated in the 1920s when inexpensive sliced bread and American cheese became easily available. Wow!
 
An interesting fact: Where do you think you can buy the most expensive toastie? Sydney of all places. For AU$22 you can buy two slices of brioche, stuffed with five different kinds of cheeseand shoved full of Aussie black truffles, so no wonder it’s the most expensive toastie out there, but I bet it tastes good. I think some of the Badgers are planning a ‘conference’ trip over there, I wonder what the real reason could be, maybe a AU$22 toastie perhaps? 
 
Other interesting facts about ‘fanatical fans’ of the toastie:
  1. There is a song about toasties by ‘Streetband’, called – Toast. Some of the lyrics are: ‘Put the grill on, slip a slice under and have toast, a little piece of toast.’
  2. There are also global leaders in toastie research and development would you believe, have a look for yourself http://thetoastieproject.com
But what makes a toastie, a toastie? good question, here’s the answer
 
“A toastie is not simply a sandwich made with toasted bread, nor is it a dry, crusty panini filled with any old rubbish and shoved into a sandwich press to warm it through for a minute. Whether made in a toastie machine, a press or a frying pan; whether you butter the outside of the bread or the appliance itself.” The Guardian, March 2014 

 
To be technical, a genuine toastie needs to be buttered on the outside and must have applied pressure from a heat source so that its exterior develops a magical golden crust.
 
We use one of these to create our magical toasties. 
 
 toastie
 
And this is the mouthwatering piece of indulgent cheese crispiness which is made from this machine, on a daily basis :-)
 
cheesetoastie
 
Some of our favourite toasties here at Red Badger, that I recommend include: 
  1. Of course the plain classic grilled cheese toastie 
  2. Ham, cheese and mustard
  3. Spinach rolly on wholewheat
  4. Roasted Poblano and mushroom with grilled cheese
  5. Smoked Gouda and roasted red pepper grilled cheese
  6. Garlicky ham and swiss cheese
  7. Soppressata and Provolone grilled cheese
  8. Mozzarella in Corrozza
In case you’re worried about how detrimental a toastie can be to your health, be warned, very! No only joking, see below some nutritional facts on a basic cheese and ham toastie, the most common one made. 
 
Unknown-1 copy
 
23
Dec
2015

Good design is accessible: top tips

by Sari Griffiths

Accessibility workshop at Red Badger

But, but… accessibility makes design less creative…?

Well, no. Good design is inherently accessible. Saying it stops you being creative is a bad excuse for NOT doing a good design. I’m going to take you through why it is so, purely from a visual design perspective. If you are interested in the more technical side of accessibility, here is a good read from GDS or watch the final part of our accessibility talk (at 1:01:56).

Otherwise, read on…

Who are we doing this for?

When we think of accessibility, we tend to think these people are only a tiny part of your audience. But is that true?

Thinking in terms of visual design, here are some numbers to consider.

Mild visual impairment

I wear glasses. So does something like over 70% of UK population (1). Sounds too high but it includes contact lens and reading glasses. That’s a lot of people.

People’s vision naturally declines with age too. There  older generations are more and more tech savvy - 11 million people are over 65 in UK (2). There are more people aged 60 and above than under 18 according to the 2011 census data (3).

Colour blindness

Maybe this is the first sight related condition you think of. There are 2.7 million colour blind people in UK (about 4.5% of UK population). (4)

 

Ichihara test Red Badger

 

What can you see in above two images? For some, these two look identical. Others might see a figure on the left but none on the right.

These are called Ishihara test – common test used to check colour blindness. The left image is the actual test, and the right image is showing how it would look like for someone with Protanopia (affects red or green) form of colour blindness using a photoshop filter.

Blindness

You might think it is strange to consider blindness when talking about visual design, but the design has huge impact on how blind people can interact with a web page via text reader.

Almost 2 million people in the UK are living with sight loss. That’s approximately 1 in 30 of UK population. (5)

Dyslexia

Again it may not be the first thing to come to your mind, but it affects 10% of UK population – 4% severely so. (6)

Devices and browsers

If you use common cross browser testing tools such as BrowserStack, it has over 70 device and browser combinations. I saw an ad for a device detection service that claims to detect over 300,000 combinations, some of those can also be considered a disadvantage.

Let’s put all the numbers into context. In August 2015 in UK, only 1.86% people were using IE8 when all devices are included. Desktop share is 3.1%. (7) And the industry still spends loads of money and time to cater for IE8.

Different ability

So. The minority isn’t really that minority. The thing is, it is not easy to draw a clear line between disability and ability. It is just that there are different ways to consume the content you are designing. Thinking about accessibility basically helps making your design more versatile – even responsive ready.

7 accessibility tips

1. Good typography is semantic and responsive

Good typography is about making relationships between the words and sentences clear. It is about identifying hierarchy among your content and presenting them visually so that these relationships are clear.

For example, if we take a typical dictionary entry as an example, and strip all typographical treatment, it looks like this.

 

dictionary-1

 

In the context of a whole page, there is no chance you’ll find the word you’re looking for if it is designed like this.

But we can use different weight, style, spacing to make a clearer difference between each element of this content.

 

dictionary-2

 

Once you identified these relationships, it is powerful enough to take some modification. We can add line breaks.

 

dictionary-4

 

Or change column width.

 

dictionary-5

 

Good typography is versatile and a must have for any responsive design. When we have to cater for so many different viewport sizes, you can no longer guarantee or predict the exact location of any content all the time. But if your typographical hierarchy is clear, it will still work in the way you intended.

It is the same for screen readers. Your typographical hierarchy will be easily interpreted into semantic coding and contribute to the ease of understanding when accessed via screen readers.

To achieve this, ‘content first’ approach to design is crucial. It’s hard to design the relationship between words when everything is “Lorem ipsum”. On the side note, ‘content first’ is also an integral part of a lean and agile approach to user experience design. But that’s for another post…

2. Large & spacious

Forget the fold.

Okay, that’s a bit controversial but I’m sure everyone agrees that there is no ‘standard’ screen sizes any more as I mentioned earlier. Not like the days of 1024 x 768 desktop screen.

There are so many variations.

What you should prioritise instead, is the ease of reading. Dyslexia in particular, calls for a clear space around each piece of information. Also people with some level of visual impairment will appreciate the larger and clearer presentation.

It is more important that each element is digestible and has a clear flow, rather than how much you can fit in the first view.

Forget the fold, and make a compelling case for scrolling. If your content is engaging and makes it clear that it goes on, your audience will scroll.

3. Be picky with typeface

This affects mainly the dyslexic audience. And they prefer each letter to look very distinct. For example, having ‘b’ and ‘d’ completely a mirror of each other is very confusing. British Dyslexia Association has a good read on this subject.

bd

I see this as a good opportunity to add some personality to the brand and definitely will consider when there is a room for us to select a different typeface.

4. Information should not be communicated by colour alone

“So, as I am a colour blind, I can’t actually see the status. But the green one means ‘complete’”

A developer

Believe me or not, above statement was actually made in one of showcase meetings I attended. Why do you build something you can’t see…?

 

traffic-light-system-blog-1

 

The example above shows a familiar colour coding system on a food package. I have applied a filter in Photoshop (View > Proof setup) to simulate how it looks for someone with deuteranopia which affects the colour green. You might be able to tell the colours are different, but it’s hard to tell what is what.

Here is the full colour version.

 

traffic-light-system-blog-2

 

Okay, now you know there are three colours. But this is based on traffic light system – so even if you CAN see the colours, you might not know what it represents in this context. What is “go” equivalent to the food? Eat now? Eat fast?

With this example, the solution was to use labels as well as colour coding. It helps people to learn what colours are associated with what information, and for some, to understand information without colours.

 

traffic-light-system-blog-3

 

If we think this in terms of a web design context…

 

colours-original

 

This lovely colour used on a popular website will look like this with Protanopia filter on.

 

colours-filtered

 

As the example above shows, functionality that relies on colours can become invisible. You can see how easily inline links disappear, whereas you can still see the buttons.

So remember that blue doesn’t mean a link. It’s the marking and shapes you use alongside the colour that makes an element a link visually. It could be arrows, icons, buttons, or underlines. You can still associate colours with them and that can be a powerful reinforcer.

A quick note of caution for the use of underlines. It is a popular short hand for links, but long underlines – especially one that goes over multiple lines or bulleted lists – makes reading harder for any audience without even considering accessibility. Have a quick think before you use one and consider if it is appropriate.

5. Mind the contrast

This is fairly mechanical part of the process. In order to pass certain levels of accessibility standard, you should measure contrast between background and text colour in mathematical terms.

It used to be pretty crude, but the current version takes into account the size and boldness of text as well as colour contrast. It is not perfect though – it defines ‘large’ text as 14px and bold, which is rapidly becoming the standard size or even ‘small’. I tend to use 16px as the standard body copy size these days. And if you are using 160px letters, it will probably be visible if it fails the test by a small margin.

Do the contrast test as early as possible. It makes you more aware of characteristics each colour has and more deliberate in your choices. It is actually quite good fun (or is it just me?) trying to tweak the colour slightly to get a ‘pass’. I use Color Contrast Checker by WebAIM to check the numbers.

Yes, it might look pretty with that colour combination on your screen. But if your design effectively prevents nearly 5% of your customer base (about 3 million in UK) from buying your products or accessing your services, surely it’s not a good idea?

6. Give a bit of colour to your background

Knocking back the glare that white screen gives will make text easier to read for dyslexic audience. Also there are so many site with white background these days, I think it will add a bit of personality to your brand.

7. Consider printing

 

print

 

One of those papers obviously spent a little time thinking about print out. When the printout removes all the clutter of a website, it really helps the  dyslexic audience to read. There are many audiences that still find it easier to consume content as a print out, so it actually serves a lot of people to pay  some attention to print layout.

If the site you’re designing is all about reading the long form writing, I’d definitely recommend spending a bit of time thinking about printing.

Design that communicates

Here are the recap of 7 tips.

  1. Semantic typography is good
  2. Think large and spacious (and forget the fold)
  3. Choose your fonts like you mean it
  4. Information should NOT be communicated by colour alone
  5. Mind the contrast
  6. Consider background colour
  7. Plan for printing

Accessibility is not about lowering your standards. It’s about making your design communicate better. It actually helps you to make your design more versatile. And to be honest, it’s not a huge task especially if you are aware of it from the beginning.

So, why don’t you give it a go?

We are looking for a new Designer to join us and work on fun projects like Fortnum & Mason website. If you are interested, take a look at the job details here and get in touch! 

Resources

  • Photoshop / Illustrator – Protanopia / Deuteranopia colour proof – Go to View > Proof Setup to see how your design looks like for someone with colour blindness
  • Chrome extension “Spectrum”, “See” – these let you simulate some forms of visual impairments
  • Colour contrast

Footnotes

If you’re interested in stats. Here are the sources of my numbers.

  1. The College of Optometrists
  2. AgeUK
  3. AgeUK
  4. Colour Blindness Awareness
  5. RNIB
  6. British Dyslexia Association
  7. StatCounter

 

17
Dec
2015

Attempting to reach actual reality

by Steve Cottle

really-header

 

Let’s do a usability test where we’ll take some participants and observe them with a product. We’ll take our findings and after a bit of analysis we’ll implement something. We’ll be able to base the development on solid research because we documented what the participants did and said. And that’s good.

Here are some things to bear in mind about usability tests:

 

Ironing out the creases
It’s good to practice. Practicing your test allows you to iron out any issues before they arise1. Imagine sitting down with your participant, you run through the first task annnd … they don’t understand what you’re asking! Oh no! All that time you spent crafting the perfect non-leading task and you have to rephrase what you’d like them to do. Will it be as effective as your original? Planning also means you’re not leaving everything to the last minute – printing stuff, getting equipment ready, sorting the room out and that.

 

Observation not conversation
As unnatural as it is, encouraging your participants to talk aloud2 about what they’re thinking gives great insight into why people find things easy or challenging. Also, try and avoid talking too much yourself. By the very nature of being a UXer, we want to help people achieve stuff so this is one that I personally really have to concentrate on. Avoid treating the session as a conversation and turn it into an observation3. Nielsen Norman Group has some good advice with their Talking With Participants article which covers three techniques (Echo, Boomerang and Columbo) that can be used in the test itself.

 

The whole truth?
So that’s all good. We’ve practiced and performed and now we can analyse our results.

Well hold on there Johnny-two-socks, the thing is sometimes participants might not be telling us the truth. Dun. Dun. Dunnn … There are several reasons why your results might be a little off the mark.

In UX Booth’s article Bridging the Gap Between Actual and Reported Behavior they have some insights into what could be going on in people’s heads.

 

1 – How would you like that answered?
Sometimes we answer questions in a way we believe the person who asked the questions would like them to be answered.  Similarly, we can answer questions how we believe to be socially acceptable … do we really exercise as often as we say we do?

 

2 – I’ll do what you do
There have been cases of participants straying completely away from what’s clearly a correct answer just to fit in with peers around them:

“[In the Asch conformity experiments] Research subjects were shown several lines of different length, and asked to select the two of equal length. The subject didn’t know that everyone else answering the question was a confederate of the researchers. The planted participants would sometimes unanimously give an incorrect answer and, 37% of the time, the real research subject agreed with them.”
Kat Matfield, Bridging the Gap Between Actual and Reported Behavior

 

3 – Self Image
People also say what they want to be true and perhaps not what is actually true, viewing their capabilities through rose tinted specs. Not so much delusions of grandeur, more wishful thinking:

“ … our self-image doesn’t match up to reality. But that self-image still influences how we respond to questions about our intentions, rationale, or preferences”
Kat Matfield, Bridging the Gap Between Actual and Reported Behavior

 

4 – Where and when
People respond differently in different contexts. For example there are more suitable environments than an office room to evaluate the usability of a sports app. The results from one environment would be quite different to the other4.

It’s not just about how people subconsciously answer questions. The very fact that people are being observed encourages changes in behaviour. The Hawethorne effect demonstrates that if a participant is set a task to complete while being watched by someone they might change their approach to completing that task. For example during an observation the participant may read through instructions leading to a more successful task completion, whereas if they were alone at home they may simply ignore them and fail the same task. There is also the notion that if a participant is asked to achieve a task then they presume that task can be completed. Whereas if they were using a new product outside of the test environment they wouldn’t know that what they wanted to achieve was possible and would enter a journey within the product to find out5.

 

5 - Ultracrepidarianism
People may also give you an answer to a question even if they they have limited knowledge of the subject just because the question was asked of them. And, if asked why they did something, sometimes participants simply may not know so they make up a reason, or offer their opinion anyway6. This is known as Ultracrepidarianism.

 

So …
Preparation will help things go smoothly and by applying some simple techniques during your test you can make the bits you have control over more successful. However the fact is, it’s inevitable that your participants will show some of the characteristics described above. The important thing is to be aware of them and to identify when they happen. You can’t control a participant’s subconscious or how much value they place on social acceptance and if you do become aware of anything which might skew things, note it down and advise how it may affect the results.

 

Usability testing tips
Here are some top tips for running a usability test courtesy of usability.gov:

1 – Be polite and make participants feel comfortable

2 – Help participants understand that you’re after feedback on the design. It’s not them that is being tested

3 – Remain neutral (refer to the Talking With Participants article)

4 – Avoid helping and leading the participant

[5 - Encourage participants to think aloud]

6 – Take good notes – there should be two of you, one to ask questions and the other to record

7 – Measure both performance (success, time, errors) and subjective (self reported satisfaction and comfort) metrics

 

Fancy joining the Red Badger team? We’re hiring UXers!

 

—————
References

1 www.nngroup.com/articles/pilot-testing/

2 www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/

www.nngroup.com/articles/talking-to-users/

4 www.uxbooth.com/articles/design-research/bridging-the-gap-between-actual-and-reported-behavior/ 

5 www.measuringu.com/blog/ut-bias.php

6 www.measuringu.com/blog/ut-bias.php

 

9
Dec
2015

Full Stack Conf – DevTools Deep-dive

by Sarah Knight

At the end of October, I spent 3 days at Full Stack Conference at Skillsmatter in London. It was a good 3 days with some interesting talks. ES6, React and Microservices were common themes.

The talks can all be found here (please note you need to sign up for an account with skillsmatter to view the videos): https://skillsmatter.com/conferences/6612-fullstack#skillscasts

Highlights

Here are some of the talks I found particularly interesting:

React and Three.js

Using 3D library Three.js with React to create interactive 3D animation.

react-three

Building applications in ES6

Build applications using ES6 syntax and jspm.io as a package manager.

Wrangling the Internet of Things using Node.js

Using FitBit and various apps and APIs to create a personalised health-tracking system.

Chrome DevTools deep-dive

The talk that really grabbed my interest, was the morning keynote session on the second day, from Addy Osmani on Chrome DevTools. DevTools is something I use every day, and essentially take for granted. There are features that I use all the time, and other areas that I don’t touch. I’m ashamed to say that I haven’t looked at the docs in a very long time, and am very behind on what new features there are to use.

This talk highlighted some really useful tools that I’m excited to start using. Some have been around for a few months, others are so new that you can only access them by turning on the DevTools experiments. The whole video is definitely worth a watch, entertaining as well as useful. Unfortunately I can’t link to specific parts of the video, but I’ve done a summary of the features covered, and where you can see them in action on the video.

Chrome DevTools Deep-dive

Security Panel – 4:23 – New – check for valid certificate, secure origins and list the domains it’s relying on.

Service Worker Panel – 5:14 – New – Can visualise the entire lifecycle of events around your service worker.

Filmstrip – 10:19 Allows you to grab screenshots of the page rendering, and see at exactly what time the elements of the page loads.

Throttling – 11:41

Custom Network Throttling – 13:25

Block requests – 15:35 – New Allows you to test what is actually slowing your page down.

Timeline – 24:25 Record timeline and check for jank.

Filmstrip screenshots – 26:27 Film interactions with the page, after the initial load. Can see each screen, and identify aspects responsible for jank, or slow-down. Really helpful for analysing animation.

Aggregated details – 27:47 Breaks down exactly where time is being spent. Able to easily see what is causing the slowdown, and will attribute it to a script or a domain.

Paint profiler – 33:05 Allows you to record interactions and see how the browser builds up the page. Can look at why something is taking a long time. You can see the exact browser draw calls to see how the pixels are painted.

paint-profiler-tool 

Animation inspection – 36:05 – New Access to timeline of all animations. Can control playback speeds, and play round with timings without having to edit your actual code.

Cubic Bezier Editor – 37:30 Cubic bezier editor, directly inside of devtools to allow you to tweak animation. Comes with a preview, so you can see how the changes will affect the animation.

DOM animation changes – 38:46 Elements on the page that change with an animation are highlighted, so it’s easy for you to see what’s going on.

Colour palettes – 39:40 Eye-dropper tool. Colour palettes tool picks out the colours used on a page, and allows you to play around and tweak them and see the effects. Also able to save your own colour palettes.

Search selectors – 41:05 Allows you to search for elements without knowing the exact classnames

Event Listeners – 41:50 Allows you to see exactly which events are bound to a particular node.

Framework Event Listeners – 43:08 View event listeners registered on DOM nodes even if they’re using a js framework. If you’re trying to debug, it’s not helpful to jump into the library code, you want to see what’s happening in the code you wrote.

Edit HTML in the console – 44:10

Inline variables – 45:56 Can check a setting to display variable values inline while debugging. Does away with the need to console.log everywhere – you can just see your variables inline.

Proactive Compilation – 47:32 If you want to run your code directly inside the VM, it will give you instant feedback on errors.

Blackboxing JS libraries – 48:13 This allows you to right-click and black box a library that you’re using. So when you add a breakpoint and step through, you can step through your actual code, instead of the source code for the library. You can actually set patterns that you want blackboxed, in settings, so that you don’t have to right-click and blackbox certain libraries each time.

ES2015 Promises inspector – 50:24 – new Shows you where your promises were defined, and when they get resolved, or if they are rejected.

 

I’m looking forward to incorporating some of these new tools into my workflow. Being able to see exactly how the page is rendering, and at what point is really useful for identifying what is causing lag. The less you have to change context and switch between code and browser the better, so I think things like the animation bezier editor, and inline variables are going to be massive timesavers. The DevTools docs are definitely something I’ll be visiting on a regular basis in future to keep up to date on all the new additions.

Red Badger offers an annual £2,000 training budget to go to conferences like this. Sound good? Then come and join us.

 

4
Dec
2015

Apple Watch – A sceptical badger’s experience

by Jun Taoka

 

It’s been one month since I have started wearing the Apple Watch. From the outset I was a sceptic; my general lack of faith stemmed from seeing a former colleague use the watch on a phone call. Awkwardly speaking in to the device, he would frantically raise his wrist to his ear for the response. It wasn’t that he just looked completely ridiculous, but I couldn’t see the sense or value in it, and it left me with a rather cynical thought;

Could it be that new technologies are actually regressing our forms of communication all in the name of progress? 

Sure enough, the appeal and abilities of the Apple Watch extend far beyond replacing the phone for conversation, and with an open mind I explore how it might improve my everyday life. I’ve been wearing the 38mm sized version, the smaller of the two options available. Aesthetically, the face looks stylish, although I can’t say the same for the white silicon strap. The screen is high quality, colours are sharp and text is crisp on the small scale, partly thanks to San Francisco, Apple’s new typeface. To navigate, the digital crown is an intuitive tool, a clever nod to its mechanical predecessors.

First Impressions

The screen is activated as you turn your wrist to face you, and you can customise how simple or complicated you want the watch face to appear. Swiping up from the main screen activates a dashboard, which summarises ‘glances’ – top-line stats or feeds from my selected apps. I like having the weather update in my glances, which is useful before stepping out the house in the morning. Also among my glances is the music app, which allows control of my music from my iPhone without having to take my phone out of my pocket – particularly handy on the crowded commute. The native Activity app keeps record of your calories burnt, minutes spent exercising and reminds you to stand at least once an hour. I’ve never been one for tracking my exercise as I’m naturally active, but for those who are keen to improve their fitness I can see its value and I do appreciate the reminder to stand, given the slump I easily fall into sitting at my desk.

 

Watch_2

The Apple Watch is able to take photos from the iPhone remotely. Here’s the happy design team out on a lunch trip. Goodbye, selfie-sticks. 

 

Double tapping the crown will take you to the last viewed app, which aids continuity in your task flow, whether it be returning to a news feed, inbox or map. Holding down the crown will activate Siri, which I have only genuinely found helpful for setting reminders for tasks at a particular time. Message notifications come in through a vibration, which can then display when looking at the watch. Surprisingly, I do find myself enjoying the ability to quickly read messages on the watch, and although it’s only a tiny inconvenience to grab your phone, somehow I find it less interrupting when I’m in the middle of a task or on the move. Receiving multiple messages at once is a bit unpredictable though, and often these messages can’t actually be read. In turn I’ll have to look at my phone, resulting in a frustrating and disjointed experience.

Apps

One crisp Autumnal morning I take the watch out for a run with the Strava app. Unlike fitness trackers, the Apple Watch doesn’t have an internal GPS. This means that if you intend to keep record of your route, you’ll need to carry an iPhone with you. I start running and with the press of a finger the timer starts ticking along with my speed and distance covered, which is all presented clearly enough to take in at a moments glance. Trying to change song track while in Strava was a problem, though. Navigating is just too fiddly if you’re not stood still. It’s certainly a nice-to-have pairing, but if I were a serious runner I might consider buying a GPS fitness tracker and a light MP3 player for simplicity’s sake.

 

Watch_1

 

Having read positive reviews, I try Google Maps, one of the more popular apps for the watch. Once I set my final destination using the iPhone, I tuck it back into my pocket. In theory, this should allow me to glance at the watch when I am notified for simple directions, rather than being glued down to my phone, helping me avoid oncoming lamp posts and commuters. The thing is, because my internal compass isn’t actually calibrated with my iPhone, directions like “Head East towards X Street” are rendered utterly useless. Instead, my colleague takes charge and leads us through some scenic London shortcuts. This is a bit of a shame, since the technology is ready, but the usability is let down by the execution.

In its early stage, apps for the Apple Watch seem to be in varying stages of development. The BBC app for example is excellent at summarising succinct headlines, which you can then read in further detail or open the full article on your iPhone. The Guardian, on the other hand, has a beautifully designed app on the phone, but is appalling on the Apple Watch. Publishing only one article at a given time and removing any control of browsing content leaves me feeling disempowered and discontent.

Final Thoughts 

The Apple Watch feels like an incomplete product, a prototype in its infancy still testing the waters, or maybe a strategic move for Apple to assert its stake in the market. Generally, I find it too delicate to navigate between apps, and the apps themselves often take a few seconds too long to sync with the iPhone. At other times I don’t find it sensitive enough; a casual glance at the time won’t work and you’ll sometimes find yourself doing a double take to ensure it displays. Although slight, the momentary delay between flicking your wrist and reading the time creates a small and unnatural disruption in fluidity.

With the development of better considered apps and hardware, such as integrated GPS, smart watches are likely to become more versatile and seamless in our everyday lives. Indeed, wearables in general and their interaction with ‘The Internet of Things’ are likely to shake things up in unexpected ways. They are already bringing new changes to healthcare and medical research and are likely to spread to sectors such as Insurance, Manufacturing, and Childcare to name a few. 

But if the Apple Watch was made to make communication less invasive, then I believe its purpose has failed. In the past few weeks a number of friends have commented (with offence taken) that I can’t keep looking at my wrist. Most of us learn to be courteous enough to ignore the vibration of a phone in a pocket, but it’s much harder to dismiss the temptation to glance down at your wrist. Naturally, the added complexity and functionality won’t change the fact that looking at a watch is universally recognised as an expression of impatience and boredom.

Fans of the watch will cry out that there’s no mention of Apple Pay here, and it’s something I would have tried had I not had a complication with the bank. That said, the more popular smart watches become, shops will need to anticipate how they can make payments easy enough for everyone, regardless of height or disability, without it feeling needlessly painful or harder than taking your card out your wallet. The biggest obstacle for the wearables market could rest in addressing behavioural change and integrating devices in truly seamless ways that won’t upset social norms.

30
Nov
2015

Red Badger meets Queensmead School for BIMA Digital Day

by Jack Vickers

Over one hundred agencies and 100 schools from around the UK took park in BIMA Digital Day, a special day that helps to educate students giving them an insight into the tech world to impart their knowledge. A few Badgers attended Queensmead School in South Ruislip to participate on 17 November.

What is Digital Day? Digital Day was created in 2012 as a pragmatic response to the digital talent shortage by coordinating BIMA members to help raise awareness of digital careers amongst young people.

How does BIMA benefit students around the UK?

Digital Day links industry professionals like Red Badger with schools and colleges like Queensmead School across the UK to raise awareness of the fantastic opportunities for young people in digital which started because of a digital talent shortage. BIMA Digital Day provides students with a broad knowledge of the tech industry and some practical challenges which could be beneficial to some students futures, as some may choose this as their career path because they enjoyed the challenge they got involved with, and found the presentation from the agency really interesting and exciting. BIMA Digital day is a proven success story now in its 4th year with over 5000 students having taken part.

To begin the day, Hanna Cevik, our Senior Marketing Badger took to the stage and introduced the other Badgers to the students, and explained what us Badgers do and get up to on a daily basis, who we work with, and an overview of our agency Red Badger. Hanna then went onto to explain Badger Academy where we take in university students for work experience who we call ‘badger cubs’ of which the students found amusing. After the Badgers were introduced to the students, Hanna went on to explain the role of BIMA and Digital Day and what the day aims to achieve.

BIMA

Our other badgers, Sari, Monika and Sarah were brave enough to take over and went on to explain in more detail what it is Red Badger do presenting slides to the students.

IMG_2990

After, there was a BIMA Digital Day live stream which had a very cool camera enabling someone with a smart phone / mac to rotate their device 360 degrees enabling the user to see all angles of where the live stream was taking place. The students found this cutting edge technology fun, so did we. 

After the slides the Badgers gave a brief overview of their career path, all interesting and exciting but eventually landed them in Red Badger to our delight. 

Below are our digitally savvy sponsors who set the briefs for this year’s 3 challenges as well as be providing money-can’t-buy prizes for the winners.

Challenge 1: Standard Life - Britons are currently the worst in Europe at setting money aside as savings, meaning we have little to fall back on or to finance our dreams. This situation is even truer when it comes to young people. A recent survey assessed only a third of younger adults (aged 21-24) as financially literate. Standard Life have tasked Digital Day students to think of a fun, easy and most importantly digital way to help younger adults to save money.

Challenge 2: Vodafone - Vodafone have given students the challenge of creating a new and exciting feature for the ‘My Vodafone’ app. Participating students will need to go beyond the current ‘My Vodafone’ app features and think about what their phone can do and what it knows about them, and how they can use these features to create something that will drive downloads of the ‘My Vodafone’ app and engage users.

Challenge 3: Sony Music - Sony Music have challenged Digital Day teams to plan a digital marketing campaign to help their favourite Sony artist with a new album release. Students need to think about emerging channels they can utilise, how to create a buzz before the release date, engage fans on the day and how to drive downloads and purchases after the release.

After the 3 different challenges were explained by the Badger team the students decided amongst their group members which challenge they wished to do. In total, there were 5 teams, of which 2 did the Vodafone challenge, another 2 did the Sony Music album release challenge, and 1 other did the Standard Life savings challenge.

While the groups were discussing ideas amongst themselves for their chosen challenge, the badgers walked around talking to the students about their ideas and gave them some useful tips and advice without giving them a whole new idea. 

bima 30

In the afternoon, the students were bringing their ideas to life, designing their apps and putting their idea onto paper, all very exciting. We then had a dragons den type event where the groups had to present their ideas to the other groups. Only 1 idea from each challenge could be submitted so a vote was taken to select the best ideas. We then asked the groups if they were interested in getting into the tech industry, and the majority said yes :-) so we must have done a good job.

The day ended on a fantastic note and the badgers had great fun, Hanna in particular, and all definitely deserved a pat on the back with some well deserved wine.

We’d like all the students that took part in the event for being brilliantly behaved and thanks to Mr. Green for just being a great host.

BIMA20

Here’s a short video of the great day we had at Queensmead School :-)

BIMA Digital Day from Amy Crimmens on Vimeo.

 

Click here to watch Rory’s Talk in 360 degrees (Live stream on BIMA Digital Day)

24
Nov
2015

Corporate Culture – a big pill to swallow

by Sinem Erdemli

FTsharks

There are a lot of things that feed into the quality of your work life. As social creatures, the culture of our surroundings is one of the most important one. 

Happy employees lead to happy companies, inspired employees make inspiring things. Yet I keep hearing sentences like “Ugh, work is work. I don’t really like it, but why should I?” and that’s always felt terribly wrong. Given we spend more that half of our awake hours at work, the culture at our workplace ends up having a great impact on our wellbeing. It affects our quality of work, our motivation, performance and mental state. Which got me thinking about the big question: How might companies create a place where people like to come back, in fact enjoy spending more than half their lives at? What do employees want from work so that it’s more than just work but also play. 

Organisational culture cannot be built in a boardroom, isolated from the rest of the company and be served across the organisation. That trick simply won’t hold up. 

Influencing social interactions are difficult, once they get going you, as an organisation, have very little control over the knock on effects. There are ways to nudge the direction though, John Coleman’s article on Harvard Business Review talks about the 6 building blocks that affect corporate culture which is a good place to start thinking about factor affecting change. 

1- Vision

The simplest foundational element of a culture is it’s vision. It gives purpose to the organisation and the work being done. Knowing what the purpose is also encourages a certain way of decision making. An organisations vision statement will not only help orient employees but also communicate expectations to clients and stakeholders. 

2- Values

While the vision statement sets purpose, values provide guidelines on how to get there. Values of a company are practical instructions that set behaviours and encourage certain mindsets. 

Look at what employees feel strongly about, is it consistent throughout the organisation? Does everyone share a set of values which allow them to work harmoniously towards the purpose or do you need to check in with every decision that’s been made and make sure they come from the right place? 

3- Practices

“We are what we repeatedly do.” — Aristotle

Doing over saying. Evidence of your culture can be seen in ways you do things, the processes you follow, incentives you provide and things you punish. It doesn’t really matter if you repeat your purpose, your values, put them on posters and hang them tall, if you don’t practice what you preach the words will only remain on the wall, they won’t become embedded in your culture and be part of your employees daily life. 

4- People

The people in a company are the ones who make the culture and carry it on. It’s your second family, you see them more than your mom, dad or even your partner. Just like a family, employees that share or have the willingness to embrace the same core values as your company will stick together and support each other no matter what. They will enjoy being together, look forward to spending time with and learn from each other. That’s why cultural fit is a top requirement in recruitment, selecting who you bring in the family is a way to keep feeding your corporate culture but also ensuring that your employees are surrounded by like minded people who share their values.

5- Narrative

“Any organisation has a unique history- a unique story.”-John Coleman

All organisations have a history, narratives are powerful tools that tell the organisations story. They feed the culture, and deliver stories about key events that shaped the organisation into what it is now and the values it stands for. 

Cultures feed on narratives, they provide not only a shared view of “what is” but also of “why is”.

Narratives can be formal, planned and organised or informal, they travel across the organisation and carry culture in narrative form. 

6- Place

Ping pong tables anyone? Or colourful slides welcoming you at the lobby? Office furniture has been the most obvious signifier for corporate culture for quite a while now. 

Our surroundings are invisible cues that trigger certain emotions and mental states. Our monkey brains scan the environment constantly and tell us whether we can relax or should be alert and ready for combat. 

The layout and architecture can be used to facilitate new ways of working, Steve Jobs when redesigning the Pixar office, made sure the facilities like cafeteria and toilets were in a central location to encourage social interaction and spark ideas across team members

.Office space is the most tangible signals of an organisations culture. Each item along with its location repeatedly tells a story, just like a broken record it repeats a message over and over again. From the motivational posters on the wall, to the office chairs and the carpet. It can make or break the mood of an organisation and determine whether it’s as a place people desired to be in. 

So have another look into your office, what does the lamp tell you?

Keeping it all together

So what do you do with these? 

Just like in everything else, there needs to be consistency. To be able to shape and sustain a solid corporate culture, organisations should make sure the foundations are in the right place and that they work harmoniously. Any discrepancy between the building blocks will lead to mixed messages to employees and have knock on effects to overall business performance. Not to mention, you’ll end up with a big group of unsatisfied, underperforming employees that are constantly at the lookout for the emergency exit to get out the war zone as soon as possible. 

Revisiting the foundation and taking a hard look on your what’s been embedded into the employees day would explain what the culture has become. Easier said than done, organisation can still influence how culture can be shaped, by carefully rethinking the building blocks the workplace can turn into an inspiring place where people want to be and perform their best.