The Internet is a Drug

Screenshot_357
Image from The Sabbath Manifesto

 

I was the first kid in my class to get broadband internet.

I grew up with it, but only from my mid teens. I was part of the last generation who knew what it was like not to have internet.

Yet it was only after a week long family holiday across the desert - no phone, internet or power - that I realised the effects the Internet was having on my mind and body.

The Internet was my escape. When I had nothing to do, or no friends to hang out with, the Internet was there for me. Worse still, I would feel bad if I didn't get my internet fix - as though I was "missing out" on some information. Studies suggest the internet is addictive, and even indicate a correlation with depression.

But of course, I could quit anytime...

That is, until I challenged myself. Giving up information was harder than it seemed. Telling myself "No internet after 9pm" would fail precisely 100% of the time, as I would be conveniently mid-way through an interesting article - and if I wasn't, there was always time for "Just one more". Going cold turkey to news websites, Twitter, and even going as far as writing my own Chrome extension to hide the Facebook news feed was the only thing that worked. Even now, as I catch myself thinking "Oh I can check that website just this once" I know its a slippery slope. I have almost reduced my Internet time enough to make sure that I use it efficiently.

Think about how much the Internet has become a part of your life, how much do you rely on it? Then look at places you can cut back, write them down next to your computer, and consciously avoid them. You might need email, but you don't really need those pictures of cats every day do you? And a daily fix of depressing news stories? No thanks.

Once you've given it up, you'll wonder why you wasted so much time on there in the first place. It will also force you to take a look at your life. For me, spare time could no longer be filled with mindless surfing - and after a few weeks of feeling sorry for myself that my life seemed empty - was instead filled with meaningful activities like cooking, music, and socialising.

All that being said, I love the Internet. It has taught me so much. But as with everything in life, finding the right balance is everything.

How the Web Smashed the Boundaries of User Interfaces

Photo_1

Remember those toolbars in MS Office with tiny buttons and icons on them? Remember how you had to look through all the different menus to find the option that did what you want? File, Edit, View, Window... what's the difference? Learning to use software meant memorising toolbar icons or, for power users, keyboard shortcuts. Worse still, different applications had different ideas of the menu under which to put the same option.

Yet, so many applications used this exact same layout for their vastly different functions. Graphic design applications, word processors, accounting software, often even video games simply recycled the same interface. Why? Because developer software made it easy for them to do so. Everything was there - just drag and drop a toolbar and a menu onto your application, and add a bunch of buttons that perform all of the functions of your application. Sure, something can be said for consistency - learning an interface once meant seeing another similar interface was not so daunting. But one question was not addressed - why was the interface daunting to learn in the first place?

The web changed all that. When applications began moving to 'the cloud'  - there was no longer a single framework, a single IDE, or a single approach to creating a user interface. Toolbars and menus sometimes appeared on websites, but even those that did were much more intelligently thought out. The user interface design was no longer a low priority left to the programmers, but an integral part of the design process completed before any coding began.

This newfound attention to the interface helped transition the way application developers thought about the user interface, and set a new precedent for design. It also kicked off new philosophies for interface simplicity such as those promoted by 37signals.

The current era of cloud applications is certainly an exciting time to be involved in the internet industry and there is still a long way to go with a lot of potential for creativity and improvement. Don't let your application be pidgeonholed by the 'typical way' of building interfaces. If your application does something new, make sure you design your interface to take advantage of that functionality.

The Foundations of an EUI - an Emotional User Interface

Istock_000010264931xsmall

"If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful."

~ Alan Cooper

Have you ever caught yourself talking to your car, swearing at your computer, or even kissing your sexy new smartphone? Even though as humans we logically know that machines are not alive and do not share our emotions, we treat them as though they should understand ours. If it doesn't behave the way we want it to, we become mad at it, maybe thinking that it will respond to anger. And so we should. It should understand us, it should respect us. If you want your users to love your machine, your machine must first love its users.

The user interface is where all of this happens. It doesn't matter how beautifully designed the inner workings of your application are. Of course, it's important that the application works reliably. But if the user experience is shit, your users will leave. Humans are emotional beings; we want to connect.

To ensure that your user interface connects with users on an emotional level, I propose a simple set of principles on which to build your UI. These foundations are intended to create as closely as is mechanically possible an experience that feels like a human experience.

Emotive

Show emotion. It's as simple as that. At any opportunity, let your users know that you're thinking of them and that you understand them.

  • Use smiley faces to convey to a user that their action has resulted in a positive outcome. 
  • Talk to your users. Say 'hello' when they log in. Don't go overboard with this though and end up getting in the way of the user. There is a difference between a friend who phones to see if you want to hang out and a friend who invites themself to everything you do.

Transparent

Users shouldn't feel like they are using a machine. On most applications it is impossible to escape the fact that your UI is stuck inside a box on a screen. Therefore it should be clear what everything does from the get-go. Simplicity is a powerful tool here, but for some applications simplicity is not an option (see my upcoming post on domain specific considerations) and even where it is not, you should give the user as much help as possible from within the application. Don't treat your user like they are supposed to read a 500 page operating manual before they can use your application.

  • Tooltips or info-bubbles on everything.
  • Take advantage of every form of user-input possible. Don't ask the user to communicate with your application with just mouse clicks. Utilise the scroll wheel and keyboard shortcuts. Provide a quick reference list for keyboard shortcuts. 
  • Take advantage of touch technology. Tablets provide a very human interaction with an application. Now that the tablet market has finally broken through, it is a great time to make the most of the opportunity.
  • Don't get in the way. In showing emotion within your application, you might be tempted jump out at your user at every opportunity. Be sensible with communication without interrupting the user, or you may end up building the next Microsoft Office Paperclip.

Tactile

User's should be able to feel your interface. Obviously, this is impossible on screen and not much better on flat touch surfaces, however there are a few ways to give a similar experience.

  • Add depth to elements. Buttons should look they want to be pressed. 
  • On-screen buttons should actually depress when clicked. 
  • Create feedback loops. Play (non-obnoxious) sounds when a button is pressed on a touch interface. You may have noticed some Android phones actually vibrate each time the user types a character on the on-screen keyboard. This is a type of feedback loop, a system of approving, confirming or encouraging user behaviour. The user immediately knows that they have successfully typed a character each time they hear a click. I plan to write more on feedback loops in a future post.

Pleasurable

A user should enjoy using your interface, even if for a dry work task. Of course, don't sacrifice usability for pleasure - try to find a great balance between the two. ThinkVitamin has a great article on emotional interface design with a focus on pleasure.

  • Reward your users. Treat them, give them status and recognition or just a pat on the back.
  • Use humour. Where applicable, show that you have a sense of humour and let your personality shine through. This might be found on error messages, thank you notes, welcome emails etc. Virgin Group companies use humour to portray a more friendly image to customers. Twitter acknowledges their own failure with "Fail Whale" when their service goes offline.

Intelligent

Artificial Intelligence may not be on the level of human intelligence just yet, but you can certainly inject some of your own intelligence into your application.

  • Think ahead. Guess what your users want in a given situation.
  • Learn. Learn an individual user's behaviour and alter their interface based on this. Observe how the majority of your users interact overall and make tweaks to your interface to improve these interactions.
  • Remember. Don't force a user to enter the same data over and over.
  • Be selective. Don't ask a user for irrelevant information. Check what information is needed instead of just asking for everything.

 

At every stage of your design process, think about how you can improve the relationship with your user. Your user may be interacting with a machine, but you are programming that machine, and you can inject your heart into it. Finally, listen to your users. Not only through direct feedback, but also indirectly through the way they use your application.

An Emotional User Interface is a two-way communication, a relationship. Don't neglect it.

Bootstrap your User Interface with help from Twitter

As a social media company which depends upon constant user engagement, Twitter is constantly tweaking and tuning their user interface to encourage interaction. Their latest upgrade unifies their web interface with their native mobile apps ensuring a consistent user experience. Twitter has no doubt been hard at work designing their UI for maximum engagement. Now, Twitter engineers are sharing their hard work for anybody and everybody to use, with Twitter Bootstrap.

Screen_shot_2012-01-22_at_11

Twitter Bootstrap is a framework which provides some basic, essential, yet often overlooked improvements to a web interface. Small touches - from the colour of buttons to indicate a positive/negative action - to navigation menus that don't disappear when you hover over them - to lovely typesetting by default. On top of that you get default, consistent styling across all browsers on all operating systems.

Twitter Bootstrap could be used for storyboarding or prototyping an interface, or even for a full production website. Either way, many web developers could learn a thing or two from the defaults Twitter Bootstrap provides.

Nest. A beautiful learning thermostat.

"How can a thermostat be beautiful?!", I hear you ask. The beauty in this product is that its designer has taken a normally boring, overlooked piece of technology, and made it into something enjoyable to use. Who wouldn't enjoy turning that sexy dial and watching those numbers change?

You also wouldn't think a thermostat could be improved functionally, but behold, the Nest learns your behaviour, and predicts the temperature you'd like.

Maybe we shouldn't have expected any less from the inventor of the iPod himself, Tony Fadell.

Split-windows increased my productivity

Once you've used split coding windows, you'll never go back to plain old tabs for your code files (or god forbid.. different windows!). You're probably thinking "Who doesn't use split windows when coding?!!", well I didn't. I knew they were there, but I didn't see the importance or usefulness of them.

I'm not talking about splitting a single file into two parts so you can work on different parts of the same file - I mean diving up your monitor into all the different files you're working on. Seems obvious, right? Since I predominantly work with MVC frameworks, I usually divide my screen into four parts: Model, View, Controller and Javascript or CSS.

Split_windows

If you're working with vim, these are the only two commands you need to know:

:split (horizontal split)
:vsplit (vertical split)

Most GUI editors have a little handle you can drag to split a window into two. If you're using Netbeans, drag a tab around to choose where you want to split the editor.

Since using split windows, I've found I can stay on track better because I can see the entire overview of whatever module of code I'm working on. As a result I am now almost completely immune to coder's block!

So if you're still tabbing around and haven't tried splitting windows, give it a go and watch your productivity soar.

RedBean PHP and Wordpress - A match made in plugin development... heaven?

Wordpress is probably my least favourite place to be coding. I know many die hard PHP fans will argue with me here, but writing procedural PHP code is not my thing. I’d much rather be working in a nice OOP environment such as that of Kohana 3.

Nonetheless, Wordpress is the defacto standard in CMS these days, and there is no denying that it has the widest variety of plugins and themes available. So while Wordpress isn’t too efficient to code with, I thought I would work out how to make developing a plugin with Wordpress a little less painful and more efficient.

Since the plugin I’m working on does quite a bit of data access/manipulation (WP options are not an option!), I quickly discovered the limitations of $wpdb, and started searching for an ORM. Of course I thought integrating an entire ORM system into the procedural Wordpress would not be easy. Then I discovered RedBean.

require('rb.php');
R::setup("mysql:host=".DB_HOST.";dbname=".DB_NAME,
          DB_USER, DB_PASSWORD);

Done.

If you want to include the Wordpress table prefix, put this at the top of your module (or another file if you prefer)

class WPBeanFormatter implements RedBean_IBeanFormatter{
    public function formatBeanTable($table) {
        global $table_prefix;
        return $table_prefix."$table";
    }
    public function formatBeanID( $table ) {
        return "id";
    }
}
R::$writer->setBeanFormatter(new WPBeanFormatter());

From there you can do all your data access through the static R class. The greatest thing about RedBean is that you can write your code before you have even created database tables – RedBean will detect the data you are saving and create/adjust the tables and columns to fit your data. Once development is finished, you can ‘freeze’ RedBean preventing it from modifying the database structure. Here is some sample code to save an object:

$product = R::dispense("product");
$product->name = "Super Gadget";
$product->price = 299;
$product->description = "A dicer, slicer, fax machine".
                           "and coffee maker all-in-one!";
$id = R::store($product);

Get RedBean PHP here.

How to choose a CMS in 4 steps

For many, choosing a Content Management System (CMS) is a no-brainer - work with what you are familiar with and prefer. However, choosing the right CMS for the right job is very important. There are a few things you need to consider when choosing your content management system.

 

1. Who will be using it?

The advantage of a CMS is that it does not require knowledge of coding to change the content displayed. However some CMS interfaces almost need a degree in computer science to understand them.

Make sure that the person for whom you are setting up the CMS can use it easily and isn't put off by the interface.

2. How popular is it?

The popularity of a CMS is important simply because a client may want the peace of mind that they can take the project to anybody else to work on it. I recently spoke with a client who had a Dot Net Nuke website and wanted a developer to add some features, only to discover that no developer wanted to touch Dot Net Nuke. She would settle only for Wordpress, probably the most popular CMS available today - due to its popularity amongst developers.

Don't choose a CMS just because you think its nice to develop with. Choose something that other developers can pick up and work with without too much trouble.

3. Is it extendable?

As a developer, I don't want to waste my time messing around bending the CMS to my will. Instead it should provide interfaces and hooks to allow full customisation of everything. If no custom functionality is required however, its still nice to know that the CMS is extendable if the client decides they want  "feature x" in the future.

Don't lock yourself in to the featureset of the CMS, make sure it is relatively easy to develop with.

4. Does it do too much?

Joomla is a very popular CMS as it provides every function imaginable. In other words, it's bloated. Every Joomla website I have used has been cluttered, confusing and generally just a pain to use. The administration interface is also confusing and not nice to work with.

Don't choose the CMS with the most features! Remember the words of poet Robert Browning and designer Ludwig Mies van der Rohe:

Less is more.

 

What do I use?

For most websites a custom installation of Wordpress is great. Developing extensions for Wordpress is not so much fun due to its fairly messy codebase, but the huge library of extensions available and the widespread usage of Wordpress makes it a great option.

For websites which require fairly custom functionality I have been very happy with the recent developments of PyroCMS. The main advantage of this CMS as a developer is that it is based on the Codeigniter PHP framework, which many developers are familiar with. In addition PyroCMS provides fairly basic CMS functionality on top of which I can build upon any custom functionality without cluttering the interface with functions irrelevant to the client.

There is no one CMS that solves every problem, so take the time to choose the right CMS for the right job.

What's in a good company name?

Although I've done some odd web design/development under my own name for a while, now that I'm on a break from uni I'm looking at getting more serious about it. I'd like to be able to expand beyond just working on my own, and enlist other people to help me out when I'm short on time or lack skills in certain areas. To create room to grow, naturally the next step is to start working under a business name.

But what goes into a good name?
It seems there are tens of thousands if not millions of design agencies out there. Every time I think of a great name, I type it into google only to discover a design firm has already taken it. Image association is important in a name - especially if the image can be emotional. My favourites are those that inspire images of freshness, crispness, meadows, hills and bright sunny days - and this is what I would like my business name to reflect.

Think of the logo
Every time I come up with a name, I try to think of a basic idea of a logo to go with it. Think McDonalds - I bet you immediately imagine the golden arches. Think BP (British Petroleum) and you probably now have that image of a big green flower in your mind (sneaky psychological move to appear green on their part). These image associations help the companies stick in your mind and create brand awareness and familiarity.

Make it meaningful
The name should immediately give an idea of what the business does. Most firms seems to go with abstract names then add the word 'designs'. I think this is great - one word to inspire imagination and one word to explain what they do. Abstract names are also very Web 2.0 :)

Make it memorable
If the name is too abstract, people will be struggling to remember the name while they are sitting in front of a blank search box. If its too generic, it will be hard to distinguish yourself from others and appear somewhat original.

What qualifications do I have on this topic? None at all, apart from watching TED talks and reading blogs. I'm just writing this for something else to do because I can't think of a good name :D