Huge demand, little improvements

I’m sure that in your mind, you have a belief that you are trying hard to understand your customer’s needs and create great products. You know what ? You are trying hard! And I’m extremely happy that there are many people like you, trying to make great digital products.

But maybe, you, just like me, always had the feeling that you are still missing something. That despite all the hard work you do, there’s always a vague void. A feeling that despite all the stats, numbers and knowledge, there is still a missing link between you and your customers. It’s not an irrational fear. It’s true. There is a missing link between you and your customers. And the worse part, is that this gap is huge.

You have absolutely no idea what your customers want. Even more you got no idea what your customers need. You can study about UX, marketing and product design all you want. You will slightly improve some metrics, you may even be so lucky as to build a successful business (which is a huge feat by the way), but you won’t make huge leaps. You will sense that there is huge demand for approachable, sexy, interesting, easy to use digital products. Yet you’ll be unable to capitalise on that demand, and deliver the maximum.

How real people think

Let us leave these questions here, and let me tell you a few stories. I was recently on a trip to my home island. Meeting family and friends, getting away from work for a bit, trying to have a good time. I had a few, let’s say shocking experiences while seeing how ordinary people interact with products (digital or not).

First, there was Katerina. She is one of the classmates that I still keep an eye on. Because you know, there is this thing called facebook that lets us monitor the life of someone who shared the same classroom with us twenty years ago. Katerina shared a video on facebook about a movie that was supposedly secret. And according to her comment, we should all rush and see that movie, because it’s so amazing, and also “they’ll take it down any moment now”.

This movie was a documentary about people who study the paranormal and all that crap. The funny part is that, there was a guy in that video, who claimed that he was able to get a parking spot every time, just because he thought about his desire to park his car. Funny considering that I have the same fantasy for years and still I have to wait for hours before I park my car.

I can understand this guys motive to claim extraterrestrial mind powers. Everybody wants to be famous, right? But why does this blog have 70,000 followers on facebook, and why is it considered be in risk of being taken down. As if it’s a very valuable secret that “they” are trying to hide. I honestly have no idea, and I absolutely cannot understand those people.

Then there is this pal of mine. He’s called Nick and he’s got some free time in his hands right now. He makes musical instruments from wood and metal. Specifically, he makes his own custom variations of Brazilian and African instruments. He showed them to me, and even did a small demonstration. It’s incredibly interesting! Using stuff most of us would throw in the trash, he makes stuff that sound absolutely amazing. Although I admire his dedication and his passion about it, I honestly cannot understand it. I don’t know what motivates a person to spend hours of research, hours of hard work, to create something that has value mostly only for him.

And the last story is about my sister. I recently bought a new laptop, and gave her my old macbook air as a gift. Having been part of endless debates on OSX vs Windows, I was very curious as what her reaction would be, interacting with a mac for the first time, after years of using windows computers. So after I let her use the macbook for about one day, I asked her what did she think about the new laptop.

Her: It’s great. I can now make up without going to the bathroom!
Me: Great. Wait, WHAT ? !
Her: See ? Here, it has a mirror.

It turns out the “mirror” was a conferencing app, which comes with every mac. This app’s icon is on the default icons on the OSX dock. She probably randomly clicked the app icon, saw her face on the screen, and thought: “hey, why go all the way to the bathroom”. Now to get you into context, she is a doctor. She’s got more than 10 years of education and quite high income. This means that she’s got the customer profile that we would expect to appreciate a well designed computer.

On the contrary she didn’t give a single fuck about the skeuomorphism vs flat design debate. She didn’t even care that her new operate system was built on the “industrial strength of UNIX”. Let alone the intuitive dialogues and the lack of viruses. Who gives a fuck about all that “chinese”, when you can make up in your computer. I honestly believe that even Jakob Nielsen would be unable to understand this customer segment.

Time for answers

Do you get it now ? People are absolutely irrational. Not in the sense that they like “sexy” designed icons instead of three more features. They simply do not give a fuck about all the things, that we think that they are so extremely important. And since I don’t want to go to sleep tonight, worrying, that I didn’t put enough emphasis on something so extremely important: THEY DON’T CARE. They don’t give a dime, period.

They don’t care if your icons are copied from another app. They don’t care if you are using bootstrap because you’re too lazy to write your own css. They don’t care if you can get to a screen in two steps instead of four. They don’t care if your backend is in PHP or rails. And they certainly don’t care if Samsung copies Apple or if it’s the other way around.

On the contrary, most people who make digital products, spend the majority of their time on exactly those things that no “real person” cares about. We spend hours debating and discussing about the little details in our products. It seems that we forgot the single most important topic. Who cares ?

So how can we put all the irrelevant questions aside, and focus on what’s important? It’s simple. We have to become irrational ourselves. And to do that we must not analyse our own products. Instead we must analyse the products we buy, but we don’t care about. Gladly we all have products that we don’t care about yet we still buy. Why did I buy tobacco X instead of Y ? Was it the packaging ? Was it the flavour ? Was I influenced by my friends’ opinion ?

The “human layer”

The analysis, and execution of products, based on basic human emotions is what I call the “human layer”. I’ve seen many companies adding a bullet to a powerpoint on their product being “user friendly”. I’m sure in their heads they must think that they try to understand users. I really wish it was that easy.

The human layer is everything. It’s the top (if not the only) reason, people make decisions. Why they buy products. Why they buy something instead of something else that has similar traits or features.

Forget about features, forget about metrics, forget about trying to understand others using the metrics that are important to you. Your customers are, not designers or engineers. They are simple humans. And the missing link between you and them, is the human layer.

The hover effect or “mouse over” back in the early days is quite common in websites these days. Unfortunately it’s one of those bad habits that harm the user experience. I guess in a few years we’ll be laughing at hovers, like we now laugh at frames and tables.

Touch is here to stay
As we speak about 200,000 touch screen devices are purchased in the US alone every day. This includes Android smartphones, iPhone and the iPad. You can easily imagine that in a couple of years touch screens will be the norm and mouse based interfaces will be considered “business tools”. Instead of creating multiple versions of your web application why not consider getting rid of mouse-only features ?

Even if people continue to use computers at the same rate as they do today in the future, and even if you don’t plan to deploy your application on mobile devices you still need to forget about the hover. The average user will soon forget that you can expect something to come out if you place your cursor in a link. The reason is that users won’t be running into hovers on the majority of devices (and the most part of their browsing time).

Drop down menus
This is one of the major annoyances in the web for quite some years now. When evolutions in CSS popularized the use of drop down menus, a lot of designers tried to imitate the behavior of desktop applications. Unfortunately they forgot a very important aspect of desktop-like menus. Once you click, they stick! The sudden disappearance of sub-menus made surfing an adventure since users were expected to hunt menus around the page. Have a look at this great study on the topic: Users Decide First; Move Second

If it’s not visible it doesn’t exist
From time to time I’ve happen to surf Facebook with a friend or two. The majority of people I know are not aware of the additional options when hovering over some areas of the page. This is not a surprise as hover destroys the principle of what you see is what you get.

Can you imagine a car or a cd-player with hidden options ? I guess not. Then why should we design web interfaces that way ? Can we realistically expect people to scan the whole screen with the mouse, just in case the designer had the idea to hide some elements ? Most people have a quick look at the page and if something doesn’t appear there they just assume it doesn’t exist. Of course they are right to think so. Nothing else requires you to imagine where parts of it’s functionality are hidden but the web of today.

How can you replace mouse over

Organize information the smart way

The best way to de-clutter an interface and therefore avoid the need for hiding things, is to organize information in a human friendly manner. If you build your information structure in a simple and efficient way, everything can be “hidden” in the next page. The best example I can think off is the apple homepage.

Apple is a multinational company selling a huge variety of products and services, from smartphones and mp3 players to business server operating systems. Yet, in the main menu of apple.com website there are only seven options plus the link to the home page. Let’s take the “Mac” section for example. Instead of having a drop down menu with sub-options like MacBook, MacBook Air, iMac and so on, you are given these options only once you are taken to the “Mac” section. Each page has as few options as possible, yet you never feel that something is missing.

Apple.com’s main menu: Only seven options in a website with a vast amount of information

Use “click and drop” (pop-over)
This is a relatively new technique to the web. When you click on a button, you are presented with some options regarding your further actions. This is a great way to hide things like advanced search options. In the picture on the right you see an implementation in the main menu of startupdonut.co.uk.

In this case, a user with a touch screen device can navigate as good as the mouse users and all the extra options are well hidden until you click topics button. An excellent use of the “click and drop” technique is anywhere you need filtering. For example, search results, viewing a list of products or like in our example, viewing blog posts tags.

Clicking “topics” on the main menu of startupdonut.co.uk opens up the list of tags

Don’t forget lightbox
Lightbox is a nice solution when you want to give some information to the user quickly without sending him to another page. By clicking on a button you display a box on top of the page which can be an image, some HTML, or an iframe. You can use lightboxes for things like displaying notifications, showing the terms of use in a registration page, giving the user a quick preview of a shopping cart or for zooming images in a gallery. In the example on the right you can see the way facebook implemented it for sending a quick message.

The most common implementation of lightbox: Sending a message on facebook

Content Delivery Networks are one of the latest trends on the web. The idea is simple. Instead of having a single server in a central location, place lots of servers of smaller capacity in a variety of locations. This allows you to avoid bottleneck and reduce delivery times.

Some major web companies (most notably Google and Microsoft) have started offering public CDN services to open source projects. A lot of developers advise to use public CDNs in your websites to serve javascript libraries like jQuery and Prototype. Before you make haste to take advantage of this new trend keep the following in mind.

Your websites will be depending on the CDN
Although CDN providers have an advanced infrastructure and are generally considered very reliable, they cannot guarantee 100% availability. In fact even commercial CDNs cannot do that. Given the fact that we are talking about free services here there will be times when the CDN will be offline. If the CDN goes offline so do you.

You are as slow as your slowest part
If a CDN is performing at high speeds then everything will be ok. However consider the following example. If a page from your application takes 4 seconds to load and a javascript library takes 6 seconds to load from the CDN then the loading time for the user is 6 seconds. So while a CDN is often used to offload a site and increase loading speed it may result in the opposite if it’s not in the peak of it’s performance.

The client will have to open a connection to a second domain instead of using the already existing connection to your one. Also the client will be forced to make a second DNS lookup to determine the CDNs IP.

Unsuitable for intranet applications
If you are developing a web-based intranet application then using a CDN will reduce performance. Instead of loading the files from a central location within your Ethernet based network you will be loading them from a much slower internet connection. Also your application will become dependent on your internet connection, therefore disabling the biggest advantage an intranet applications.

Offline development becomes painful
There may be times when you’ll have to develop your application offline for a variety of reasons. Whenever you go offline you must change you code to temporary use local files. This can be a real pain depending on the structure of your application.

JavaScript is cached anyway
JavaScript files are cached by the client’s browser. The only real benefit of using a CDN is for first time users. Are you willing to take the CDN risk just for the chance of increased speed on the single first pageview? I guess that depends a lot on your bounce rate but you get the point.

Conclusion
Before making the decision of using or not a public CDN take some time and make some performance tests of your own. Get YSlow and test loading speeds yourself. This is the only way to see if it makes sense to use a CDN.

My latest experiment. A redesign of my website using a literature magazine as a source of inspiration. The idea came to me while I was reading this magazine in a local cafe.I thought that the newspaper and magazine industries have been existing for decades now. Thousands of talented people have evolved the science of text layout in printed media. The web is not very different from that. If you think about it, both the web and printed press give you a flat surface where text is displayed.

What I see all over the web is a lot of people trying to create a great layout for their website or blog. I don’t recall seeing anyone looking back in the past. This has been done over and over before. Why reinvent the wheel ?

I used a two column layout to achieve better readability. Mainframe CSS framework handled the layout through the 960 grid system. On the server side, I moved from Drupal to a custom made system based on CodeIgniter which will power all the websites I’ll build from now on.

One of the biggest challenges in web development is making multilingual websites. The easy part is having common functionality across all available versions. The hard part is making sure you don’t have blank spots. And that means that if you got an English-French website, you shouldn’t have French words appearing in the English version and vice versa.

The oldest solution I can remember used in PHP is the use of constants. For example instead of writing Home page in your HTML, you write __HOME_PAGE__. Then you got a file for every language with constants that you include in every “visible” PHP script. An if block takes care of including the proper constants file for the currently active language. The major problem of this technique is that if something is left untranslated you get ugly __CONSTANTS__ all over the place. There are few things that can make a website look more amateur.

In CodeIgniter there is the language class that takes care of this issue. Instead of using constants you simply do $this->lang->line(‘Home page’) to get the translation for the words Home page. Then you got files in the “application/language” folder with all the translatable items.The problem with this approach is that when something is left untranslated you don’t know how to find it easily.

I recently took over a multilingual e-shop platform project for an agency. A friend and colleague there came up with a solution for this which is to extend the language class and add the ability to the line method to add marks before and after a string in case there is no translation available. For example Home page becomes !– Home page –!.

Although this time we are more organized and flexible since we can for example enable/disable/customize the !– –! marks you will notice that practically we are still in the footprints of the ugly constants trick. We still get !– Ugly –! stuff in our website in case a translation is forgotten. The worst part is that we still have to scan the entire site by hand and hunt down every little !– untranslated word –!.

To overcome all of the above problems there are two simple things we can do. The first one is to add semantics to all strings we want to translate. This way Home page is different from home page and we can ease the guy/girl translating our content who won’t have to figure out when a word starts a sentence or not.

The best part is that we can have all the items we want to translate gathered automatically without the need for spot marks (!– –!). To achieve this you need to follow these steps

1. Create a simple two column table in the database called translations (id INT, item VARCHAR 1024)
2. When the line method of the language class finds an item that doesn’t have a translation available make a check to see if this item is stored in the translations table.
3. If it is not stored then create a line with the exact text you use in your language files. In our case this is $lang[‘Home page’] = ”;
   Insert this line in the translations table.
4. Create two pages. One called something like ‘translations’ and another called ‘translations_clear’. The translations page should run a simple select query to get all the items and just display them in the browser. The translations_clear page should just empty the translations table.
5. Run a spider against your page to make sure all links are visited. Any decent offline browser should do the trick. Windows users can use Httrack and linux users wget.
6. Visit the translations page after the spider is done. You will get a page with all the items inside an array ready to be translated. Simply copy the entire page to your language file and start translating.

This way you can have web pages that are translated in one step, right before you fire your FTP client for the final upload. Also when something is added later but is not translated you won’t get __UGLY__ stuff in your page. You don’t have to use CodeIgniter to use this technique. All it takes is that you use a function to fetch the translated items.

One of the problems that came up with the rising dependency on Google and SEO in general is the use of www. On the one hand there is no reason to use www anymore. 100% of modern browsers use the HTTP protocol by default so you don’t need to specify that you need to access the web part of a domain. It makes your site’s address larger and harder to remember, more ugly, less likely to fit alongside a logo. Also many suspect that it has an effect on your keyword density, therefore harming your search engine rank just a little bit.

On the other hand most of the users still keep the old habit of typing www.site.com in the address bar. I try to redirect to the “clean” version of the domain on all my sites. Even if the user uses the www he’s not harmed at all.

In fact most of the times nobody even notices. One way or another there is a solution to this. Whether you want to get rid of that 90s annoyance or you want to keep your domain a classic www there is an easy way to do this in codeigniter.

First create a hook in /application/config/hooks.php

$hook['post_controller_constructor'][] = array(
 'class'    => 'Utils_hook',
 'function' => 'redirect_to_base',
 'filename' => 'utils_hook.php',
 'filepath' => 'hooks'
);

This tells CodeIgniter to execute the “redirect_to_base” method before the controller starts executing it’s own methods. Then you need to create the file /application/hooks/utils_hook.php and place the following code inside

Class Utils_hook {
 function redirect_to_base(){
  $ci = & get_instance();
  $uri = $ci->uri->uri_string();
  // recreates the URL
  $location = substr(base_url(),0,strlen(base_url())-1).$uri;

  $active_base_url = 'http://'.$_SERVER['SERVER_NAME'].'/';

  if (($active_base_url != base_url()) && ($_SERVER['SERVER_ADDR'] != '127.0.0.1')){
   Header( "HTTP/1.1 301 Moved Permanently" );
   Header( "Location: $location" );
  }
 }
}

This way the visitor is always redirected to the URL version you want even if he entered through an old bookmark such as http://www.sitename.com/action/example/

A few years ago, Yahoo released a free benchmarking tool for web pages. Aka Yslow. This tool is measuring what and when loads, during a pageview. It then gives a report about what is slowing down your page and then makes some recommendations on how you can improve the performance of your site.

One of these recommendations is that you should load your JavaScript in the bottom of the page, right before the closing </body> tag. The Yahoo people even went so far as to call this a “best practice”. Ever since, there is an ongoing debate among developers about the right place to load JavaScript files. Most people are indeed consider placing JavaScript in the bottom of the page a best practice. Is it so ?

When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading.

On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if for example your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.

I’m using the word perceived, because in both cases the page will be completely loaded in the same amount of time. In whatever order you place your assets, they still take the same time to load. All we can achieve by placing JavaScript at the bottom is how fast the user thinks the page has loaded. But still it sounds amazing, right ? By putting JavaScript at the bottom of the page, our pages will appear to be loading twice as fast.

The perception of “the web”

Well this used to be the big picture in the past. Back then, when the web was something very different from what it is today. Overgeneralizing, for the sake of simplicity, this is how the web was perceived by almost everyone (including web professionals) until recently.

Since then much have changed. First and most important, we don’t talk about “web pages” these days. We now talk about “web apps”, “software in the cloud” and “software as a service”. The web used to be more like digital paper. A way to let people know about your company, a platform for your blogging, at best a place to read your email remotely. But now in 2013 the web is quickly replacing the remnants of desktop software and is battling toe to toe with Java and Objective-C, for domination on mobile devices.

All these concepts were a utopia, no more than five years ago. But today the content is no longer the king. The web is now a democracy. People don’t come to us for content anymore, they create it themselves. Our role as web developers is to empower them, by giving them the tools and functionality to create and interact with their content.

Forget about supporting IE6 and browsers without JavaScript. This is just a 5% of people who fear change, like some people never bothered to buy a computer at all. In a world where we are competing with native mobile developers over performance and features, we can’t afford to think of the web as anything other than pure software. In a way, functionality is the new content and JavaScript is the new king.

JavaScript placement in web applications

Back to our topic. Let’s get back to our example, where we load our JavaScript at the bottom of the page. The user is left for a few seconds with a perfectly looking HTML template where nothing is functional. If the users tries to perform an action and finds out that it’s not working, he will perceive our application as “broken”. What’s even worse, is that we have no way of letting the user know when the app will be fully functional.

On the contrary if we place our JavaScript on top, the user will get a blank page for a few seconds, but once the markup is loaded, everything will be fully functional from the first second. Therefore by purposefully giving the user a blank page, we are giving him information that the app is still loading. The user knows that the app will be functional when he sees boxes and buttons.

The user may think that our app is slow, or that his connection is having hick-ups or even that his device is slow. Not only we don’t take the full blame for the slow loading of our app, but we eliminate the possibility of the user interacting with a broken version of our application.

A few seconds to load the app is one of the most common things in digital devices in general. People wait for computers to boot up, for youtube videos to load, for Microsoft Word to open, for almost everything. Nobody will go crazy for a couple more seconds of waiting. But there is nothing worse than a user tapping a button which does not work. This is a breach of trust from the user end. If the app didn’t function correctly now, will it lose my data tomorrow ? Should I pick another app instead ?

Even the slow loading experience can be eased, using a simple loader like Gmail did.

Summarising, it really depends on what you’re making. If you’re still stuck in the “content” world then it’s maybe best to place your JavaScript at the bottom of the page. But if you are making web software you’re much better, placing JavaScript at the top, because functionality is the new king.

In the first presentation he talks about MainframePHP, the framework we use to create web applications. The first parts of the presentation are a basic introduction with case studies and performance data. He goes into detail on how Mainframe compares to external libraries which provide similar functionality. This is also a great intro to people who are getting started with Mainframe and want to see how it implements concepts like theming and modularity.

In the How to get the tech job of your dreams presentation he explains why you should not have a CV and how to write a great cover letter.

The million euros question

You (obviously) know your product, and you know the competition.

So since the main competitor in your field prices their equivalent product at $X/m, how much would you pay for your product. Oh, you have 5 seconds to answer…

If you can’t answer this question in 5 seconds, this means one or more of the following:

• You don’t have a clear idea of what your product really is.
  You’ve built some features together, but you have no sense of the end result.
• You have not studied the competition enough.
  You may have a good product, but you don’t know if it’s good enough.
• You can’t put your self in the customer’s shoes.
  This is by far the worse case scenario. If you don’t know how people perceive and evaluate similar products, it’s very hard to know what features to build, how to advertise your product right and obviously how to price it.

The tablet example

First of all let’s define tablets.

Tablets are the device that people use to get away from all the things that suck about computers. These include, Adobe flash, keyboards, cables, Microsoft office, loosing your work because of a virus, running out of battery after an hour, troubleshooting driver problems and many many others.

People use tablets to easily watch videos, surf the web, enjoy music, and talk with friends. They like them because they are simple, light and the battery lasts for long.

Microsoft released Surface tablet for $500, the same price as iPad. Surface had most of the problems in group A, where iPad had all of the qualities in group B. Surface’s only competitive advantage was running Microsoft Office natively. As we all know, MS Office is a boring piece of software most of us already use all day at our computers at work. Mostly because we have to.

So if the top competitor in the market prices it’s product at $500, and your product is heavy and boring, with a worse screen and poor battery life how much would you pay for it? I’d say $200 would be a fair price, although I’d still go for the iPad.

Microsoft failed to answer all of the above questions and ended up dropping the price by $150 a couple of weeks ago.

Who got the price right ?

Google was more respectful of the competition and priced Nexus 7 at an introductory price of $200. At the time android was not as polished as iOS, it didn’t have an equally large app selection, it was heavier and with a bit worse battery life. Still at $200 it was a very honest and competitive offer compared to iPad mini being 65% more expensive at $330.

The pricing path

Every day during the development of your product, it’s important to be respectful of the efforts of other talented people. The market is full of well established products that you simply cannot compete with without either an amazing product or a very competitive price.

The more you evaluate your competition the harder it looks. This not defeatism. This is realism. There is a good reason 80% of new companies fail during the first five years. This thought path will eventually lead you to the conclusion that in most markets it’s impossible to compete. For example I can’t imagine any startup competing with Gmail.

That’s perfectly fine, you don’t have to compete with giants. Through constant and honest re-evaluation of your pricing strategy you will understand in which market segment you can achieve a competitive pricing for your product.

The rule of thumb is that if you end up pricing your product very low, your are trying at a very saturated market. If you end up pricing your product very high, you are trying at a market where there is not sufficient demand. The pricing path leads to the ideal positioning of your product in the market, in a segment where you can realistically have a good chance of competing.

It’s also fun to see Microsoft making fun of Siri in it’s latest commercial.

But it’s infinitely more fun reading IDC’s report on mobile OS market share for the first quarter of 2013.

Android: 75 %
iOS: 17,3 %
Windows Phone: 3,2 %

Losers always try to find cheap ways to degrade other’s work.
Winners are busy developing their next version.