“Google, this is bad marketing. You have changed the way we search the web and we had to get used to the new layout again and again. And now again. Please do not change the layout just for the sake of it.” – a person

Today, Google has yet again changed their design. I can see the smiles on the faces of the management: we did it, we again improved the user experience.

Let us go through what sort of user experience Google has improved.

1. Change

People get used to things. Change is never easy. Unnecessary change is bad user experience because people will have to spend time and effort to figure out how the new works and get used to it. Change is good when it makes sense. It does not make sense to change just for the sake of it. Don’t misunderstand me, I like change. However, I like changes that improve something. Google’s design changes have not improved anything. Users are upset. It did not make sense.

2. Navigation

The new design suggests that drop down is better than top navigation or side navigation. How untrue. Corporations started to use drop downs because they had too many things to talk about… and they needed to put just one more page under a main page. Just for the sake of it. Look at wordpress.com or apple.com – neither of them use drop down navigation (WordPress had dropdowns but they eliminated them because they realised it’s not working). Drop down navigation hides “options”. When you create a drop down navigation you choose to hide content that may be relevant to the user. Long time ago Jacob Nielsen have said that the web user scans the page. You can’t scan something that is hidden can you? No, of course not. That’s why it’s a bad idea to use drop downs when you can avoid it.

3. Jump

If you start typing your search keyword into Google’s search box it immediately jumps up. It creates a very bad user experience. I’m not too sure what else can I say about this point. It’s simply not cool.

Now, there you have it. I hope that Google will soon realise that with these “UX improvements” they are eliminating their users. Make design changes when it’s necessary but don’t do it just for the sake of it.

A more humane User Experience design:

Persona: Complex Speech Bubble Persona

Sitemap: Commented Sitemap

User Journey/User Flow: Speech Bubble User Flow

Prototype/Wireframe: Big Brother Prototype

My idea for a new wireframe originated in the frustration of having created great personas and user journeys and not applying them on the prototype. It was so helpful for me to see these newly styled user flows and personas because they helped me visualise my users. However, I quickly forgot about them when I started creating the prototypes. The prototype got simply detached from what I’ve learnt from my personas and user journeys. I thought to myself that there had to be a better way.

Searching for a better way

Then I’ve come across this great essay on personas and scenarios. There was one particular idea that excited me quite a bit. This idea was very simple. The writer of the essay displayed couple of photos where the designer had real-life-size cut outs of the personas next to his desk. Below is a photo from the Essay.

All credits to RÓSA GUÐJÓNSDÓTTIR, photograph by Robert Jäschke

I was like wow! I should always have my personas around to remind me of who I work for. So I printed out my personas on a A4 sheet and sticked it onto my wall in front of me. That felt great. They reminded me to keep them in my mind when creating the website prototype.

Need for Tweaking

The printed out personas were great for a while only until I forgot about them. The outside world and the computer screen are two different worlds. Those who work with a computer daily know what I am talking about. So I thought I should bridge this gap.

The idea

What I did was simply creating a left sidebar for my personas on the prototype! As I have placed them there it looked as if they were always watching me working. So I called this the “Big Brother Prototype”. Here it is, an example for my Big Brother Prototype.

Live demo

How to do it step by step

Create your prototype in axure but leave a small sidebar for your personas. This sidebar could be around 100px to 200px wide. As you can see on the example above, mine has 150px and a little padding from left and right and from the top. Link your person pictures to your personas. That’s it! You can call it “Personas”, “Big Brothers”, “My Users”, “The Audience”, I called it “The Panel” as they are my judge when creating the prototype. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

The Big Brother Prototype will constantly remind you that you are creating the prototype for your users. It will help your clients also because it makes it very clear that it’s their users who will be the ultimate judges of the website and not them.

The way personas were made has frustrated me for quite some time. To me it seemed they didn’t give enough insight into the persona’s life. Some of them looked like long essays, others looked like CIA database profiles. Simply put I wasn’t happy the way personas were made. I thought there had to be a better way.

The most common personas I came across looked like these:

Concerns

• Clients may not feel enough empathy
• Clients may not want to read the whole text
• Telling a story in a way of displaying data may look like a dry database

Searching for a better way

So I started searching for a better solution. Actually, I came across a couple of nice concepts. One of them I found on UXMag.com. It was very detailed but somewhat too detailed. However, I liked the very real persona picture and the persona summary ie “Learning focused teacher”. Another great concept worth mentioning is Jason Travis’s persona. You can see his set on flickr. I was  fascinated to see how much handbag items can say about a person. So I thought it was a really good shot, however, I missed the text, context and scenarios.

Speech bubbles – the idea

Since I’ve used speech bubbles for my sitemaps and user flows I thought I should go ahead and use the concept for personas, too. Since I started to study the difference between left brain and right brain thinking, it felt right to create a persona that displays the split thinking between the 2 brains. This is what I came up with and I called it the “Left brain – Right brain Persona”:

This was great, however, I felt it’s too empty and there are so many more things I can add to it. I thought about it and came up with an idea. The questions of a person can tell a lot about the personality.  As the above concept focused mainly on distinguishing the left brain and right brain and not on creating empathy, I though I’ll drop the concept and add more important questions to the speech bubbles. So my next version I called the “Questioning Persona” and it looked like this:

I knew I’m onto something and I wanted to keep the questions as I felt they create empathy and gave good insight into the person’s thoughts. However, I felt that I still can add much more to it. I went on and tried out a couple of more ideas. Next up, the “Interview Persona”.

I felt this was quite artificial and such an interview could never really occur. But I liked the idea of replying to a question… So this lead to the next idea. In order to make the discussion more real I introduced a colleague and created a conversation between my persona and the colleague. I called it the “Overheard Discussion Persona”.

This was quite good I thought. Even my wife told me she can feel empathy and that everyone likes to overhear people talking about interesting things. So I knew I’m onto something and I want to use this concept. Next, I thought that the speech bubbles are nice but it would be good though if I was able to show a couple of things in a less abstract way. So I added titles like “worldview”, “motivation”, “demotivation”, “looking for”, “not looking for” to my speech bubbles. I called it the “Think Bubble Persona” or “Worldview Persona”.

I really liked this one. It was very appealing to me visually. I felt, however, that I should settle with the overheard persona instead as it looked and sounded very real. So I added some life pieces to my overheard persona as per the idea of Jason Travis. However, I thought these life pieces should not be limited to what a person has in their handbag but what they listen to, what is their dream holiday, what they read, what pets they have etc. So I came up with this one.

Then I created a full “Life-Pieces Persona” just for the record.

I thought I have enough concepts by now and I should maybe really try to combine them in order to create my final persona. It wasn’t easy because there were too many speech bubbles and the first couple of attempts looked a little bit unorganised and overcrowded. You can see one of my attempts below.

But then I moved things around and I came up with this final concept and this one I really liked. And this I called the “Complex Speech Bubble Persona”. It was a really long exercise but I think the final product was worth it. Use the concept if you like and share it with others.

Live Demo

Step by step process

First, source your persona photo. This is very important because by doing so you will create empathy for yourself towards your persona. In my experience, starting from the text will not inspire you enough to create enough empathy for building your persona. A good source to look for non copyrighted photos is flickr. Just set the advanced search filter to “Find content to use commercially” and “Find content to modify, adapt, or build upon”. Then source your life pieces: music, clothes, car, house, family phone etc. Try to tell a story about your persona. Then create the speech bubbles from a round rectangle and a triangle behind it. Now, you are ready to write the content. The speech bubbles on the top are the thoughts of your persona about certain topics such as “looking for”, “not looking for” etc. The bubbles on the left make up the conversation with a colleague, friend, boss, customer – whatever your persona’s usual environment requires. The bubbles on the right are questions your persona may ask when visiting your website, using your product etc. That’s it. I hope you like it, it’s not as hard to create it as it looks like. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

The Complex Speech Bubble Persona is a great way to create empathy for your users. Both you and your clients will be able to visualise various aspects of your users, their worldviews, their questions, their talking style and their life pieces. All these can create a very complex picture of your persona which can then result in a better user experience.

I have never liked the way user flows were done. This is speaking about my personality quite much – always in search of something better and looking for opportunities to innovate. Anyway, most user flows seemed to me too clunky or they just simply freaked me out. I thought to myself there had to be a better way.

Concerns

My concerns with these user journeys were:

• Will clients understand these user flows?
• Will clients understand that we are trying to show how their users will navigate their websites?
• Will they have patience to read these kind of electric-panel-like charts?
• How will clients be able to visualise the pages?
• Will they have empathy for the user when trying to understand these diagrams?

Search for a better solution

So I started to search for a better way of doing user journeys/user flows. And these are the types I found:

1

2

No 1 proved that there is a way to visualise the pages which a user’s journey touches. However, it looked like a long process to create this type of user flow. First off, you need to create your wireframes in order to be able to insert them into the user flow. Not a great idea. But the visual concept fascinated me.

No2, this did not entertain the idea of showing thumbnails of pages compared to No 1, but it displays the user’s activity, a little profile picture and a timeline. I thought the timeline was a pretty good idea but it was hard to read. I also thought that the profile picture was a good idea, however, it looked too abstract.

Talking persona – the idea

What if my personas could talk… then they would tell me what they think about my sitemap. Sitemap + what the user thinks sparkled the bulb and I was finding myself putting speech bubbles next to my sitemap. The bubble wasn’t a new concept as I have used the idea with my commented sitemap. Then I added a small profile photo of my persona next to the speech bubble, time stamp above the bubble, arrows for the journey, a scenario and a summary of what the persona wants to do on the website. This did the job and I think the results were outstanding.

The idea

I think this is quite revolutionary so here it is:

Live demo

Step by step process

I assume you have your personas and sitemap ready. First, create a new page in axure and copy in your sitemap. Then create a speech bubble. You can do this by putting together a rounded rectangle and a triangle. Then add a copy of your persona’s profile picture, add a time stamp and a number into the corner of the bubble. Now you can create the journey. Use the connector mode (F11) and connect the pages. You can style the connectors to make them look like arrows. Now add a full circle with a number to each journey points. This will ensure that your clients can associate the bubbles with the steps of the journey. Once you are done with this you can add the top header as I did. Add your persona, an “I want…” statement and a scenario. That’s it. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

Using this type of user journey will not only benefit your clients to see more clearly what you mean but it will help them to continue feeling the empathy you created with your personas. They will be able to place the user flow into a real life situation by virtue of the scenario and the time stamped speech bubbles. Clicking on the pages will direct them to your prototype. How great is that!

One of the first things that frustrated me when I started working as a UX designer was sitemaps. Sitemaps used to be done in Microsoft Word with bullet points. I wondered how clients will understand sitemaps that were merely a list of pages in a hierarchical order. I would have thought there has to be a better way.

Concerns

My concerns with these sitemaps were:

• What if the client will visualise a page differently than it was meant to be?
• How can a UX designer/IA finalise the sitemap without doing wireframes/prototypes and sketching?
• How will pages that were realised or removed later effect the client?
• How will clients connect the concept of the sitemap and the wireframe/prototype?
• Is creating a sitemap helpful at all if it’s hard to imagine what each page will look like?

Search for a better solution

I started searching for different sitemap visualisation ideas, however, without success. I knew I will have to find my own way of doing this. What I came up with is not final or perfect but it proved to be really helpful to me and to my clients.

In an ideal world I would create a draft sitemap just for the record but would finalise it only after the prototype is ready and I would see the pros and contras of each page, their features and modules. When I’m ready I would show the client both the sitemap and the prototype. However, when scheduling has to be taken into consideration you may need to approach these phases separately.

Talking to myself – the idea

When creating these sitemaps I was routinely talking to myself. Talking about what each page will do, how will they look like, pros and contras of a page and so on. It was helpful for me to visualise the sitemap in a way of talking to myself about it. And then the bulb sparkled and I thought to myself why not comment the sitemap and let the clients know what I was thinking when I created the sitemap. Add my ideas, describe features on the page, speak about dilemmas so that everyone can see it. Exactly this is what I did. I added speech bubbles to the sitemap which I created in axure and made my clients happy.

The idea

Live demo

Step by step process

First, I created the page structure in the axure sitemap window. I simply used empty pages as I will create the prototype later. Then I created a page called “Sitemap” outside of my sitemap structure. While on the Sitemap page I right clicked on the Home page and selected the option “Generate Flow Diagram”. This created a simple sitemap of all the pages under Home. I used the “Right hanging” diagram style as it gives the best overview for even larger websites. But you can use Standard if you like. Then I added my speech bubbles and explained what each page is supposed to do. In fact you can use and modify this concept as you like. You can also download the axure source file to get started.

Benefits

This sitemap not only shows the pages of a website in a hierarchical order but it also gives an insight into what each page is meant to do. Since it was created in axure as a sitemap diagram, each sitemap item will link to the page it’s associated to thus bridging the gap between the sitemap and prototype.

Can you hack it? An awesome film about hackers and outside of the box thinkers, innovators, people who love to help. In a world that embraces the status quo there is a little chance to make a change. It’s sad but true. Galileo Galiei just escaped the life sentence by complying but then he added “yet the earth moves”.

It’s really difficult to understand that businesses and governments punish ethical hackers instead of awarding them for drawing attention to vulnarabilities in their systems. Pride and fear of the truth lead these organisations to think that ethical hacking is a crime. However, motive is the ultimate judge of a person’s action and by that law ethical hackers do not comit crime.

The world hasn’t changed, let it be Galileo Galilei or Adrian Lamo outside of the box thinkers are persecuted, mocked and cast out of the society. Yet, the world needs people who are ready to change everything.

Are you going to change the world?

I just came across a discussion today and I was fascinated by the sheer ignorance of Getty Images as to what the web is all about : sharing. A victimised web designer writes:

This is a lesson learned for anyone building their own web site, or commissioning a site to built on their behalf – it’ll probably seem obvious to most of you.

I’ve been working through the night for months trying to build a business and attract customers. So far, the only thing I seem to attract is lawyers.

I designed and built mycompany.com (a previous venture) myself, and used images that I found in Google image search that did not have any copyright notice associated with them.
I’ve just received a letter from Getty Images legal department invoicing me for £1000 for including one of their images on one my site.
The image was just included alongside some content on a page that was deep inside the site – I wouldn’t have dreamt of using it had I known that there would be any payment associated. I’d never heard of Getty Images, nor did I have any idea of the price.

The letter from Getty also indicates that if you employ contractor or third party company to build your site, you are still ultimately responsible for the content and honouring copyright of any content used on the site – so it’s worth getting written confirmation of rights to all images on your site.
I’ve learned the hard way that you can only use images where permission is explicitly granted to do so.

Has anyone else experienced this? Any ideas? I’ve obviously removed the image, and am seeking legal advice.

I don’t know how Getty dares to do such a thing. They should sue google, not the user. If google can show a copyrighted image among their FREE image search results a user will think it’s free. There is nothing wrong with that, it’s common sense. Getty should have instructed Google not to show its copyrighted images at all. That would solve this problem once for all.

I’m also amazed by the authority Getty wants to portray. A web designer used an image on his website, then he removed it so what’s the big deal? Clearly, Getty fears loosing their business because the Internet is about the people and their content and NOT about big businesses. The same ridiculous fight is going on between file sharing users and big music labels. They will slowly give in because people are the power and business can’t live without people.

I consider Getty’s misused authority as a very ugly and unjust approach to business. As for Google it was a very bad user experience which could have been avoided.

During my career I had 2-3 claims over photographs used on my websites. However, these cases were initiated by the author of the photographs and not by Getty or other stock photography site. I respectfully removed the copyrighted images from my website and the issue was solved. I for one do not understand the hoo-ha around this issue. If someone wants to use my design, photo or art and they did not ask my permission I would simply ask the site owner to remove it. And that’s it. I don’t know why it’s necessary to play the big artist and claim big bucks for something that was found for free on google. I strongly disagree. Getty seems to be detached from the reality.

To use a “detection system” to find their images used “unlawfully” shows that they enjoy this game because it’s good money for them. They have high paid lawyers and the user doesn’t. So they win. Not for long. Next to settling the issue with Google they should rather invent a system prohibiting to copy/download their images “unlawfully” instead of suing individuals.

Just read a discussion where yet another person writes about their frustration with telesales:

Well, I’m registered on the Telephone Preference Service but it doesn’t stop an unknown number from persistently calling me at least once a day, but never at a moment when I can actually take the call and tell them to sling it. Of course, they don’t leave a message. Ever. Which means I have to put my phone on silent so they don’t disturb me, which in turn means I frequently miss calls or texts I need to get. If I find out who these people are, I will be paying them a visit, late at night, with a baseball bat with a nail through it. (If it’s you and you’re reading this, you have been warned!)

This system is broken. It doesn’t work.

“We understand if you are dissatisfied, if you wish to help us please let us know the reason of the crash” This is the message I’ve recently come across when uninstalling a software and I was amazed. Usually these sort of messages go like this “Reason of uninstallation…”

It was an IM History program I was testing and it didn’t work. It crashed, froze, had bugs, it error-ed etc. So I uninstalled it but without feeling treated like I’m just there to tell them the reason for the crash. No, my feeling of dissatisfaction was noted, understood and my opinion for improvement was asked.

The words you use to communicate with your dissatisfied users can make or break your product. Yes, your product should work. But when things go wrong make dissatisfaction a good user experience.