Målet vårt er ofte å lage en “intern Google” for kundene våre. Det betyr at vi må forstå hva brukerne leter etter.

Når du søker på “365″: Leter du da etter en kollega med internnummer som slutter på 365? Leter du etter personen med ansattnummer 365? Eller leter du rett og slett etter eksperten på produktet deres som heter “365″?

Jeg er en stor tilhenger av ett stort søk for bedriften din! Og jeg vet at jeg har flinke kolleger som kjenner veien frem til god relevans og en smart søkemotor.

Men: Min teori er at et godt søk blir enda bedre, jo mer vi vet om hva du egentlig leter etter.

Vi har to ganske tydelige retninger for personsøk: Enten søker du etter kontaktinfo eller så leter du etter områdeeksperten.

Lek at vi skal lage et internsøk for Willy Wonka. Målet vårt er å la Oompa Loompaene bruke mest mulig tid på å lage  fantastisk godteri, og minst mulig tid på å lete etter oppskrifter, eksperter og telefonnummer.

I tillegg til å ha laget et stort “internt Google”, har vi også laget to app’er for Loompaene. En telefonbok og et ekspertsøk.

Først telefonboken:

Willy Wonka PhoneBook er akkurat det det høres ut som. En app på datamaskinen, nettbrettet eller smarttelefonen som lar Loompane søke internt etter et telefonnummer eller en Lync-kontakt. I eksempelet over husker ikke brukeren fornavnet på kollegaen, men vet at han heter Loompa til etternavn og at han jobber i sjokoladeavdelingen. (Og slapp av! Selv om du ikke ser forskjell klarer en Oompa Loompa å skille ansiktene fra hverandre.)

Dette løser et problem vi ikke bare finner på sjokoladefabrikker, men hos de fleste av våre kunder; å finne telefonnummeret. Og på denne måten har vi enda større sjanse for å gi dem rett svar på topp i resultatlisten.

Fordi brukerhistorien er så enkel som “jeg vil finne kontaktinfo til kollegaen min”, kan vi også strippe løsningen for sortering og fasetter – og ende opp med et enda enklere brukergrensesnitt.

Når en Oompa Loompa på den annen side vil finne eksperten på sorbet kan han derimot starte app’en “Willy Wonka Expert Search”:

Ekspertsøket søker gjennom alle dokumenter som ligger på filserveren til Willy Wonka, og søker gjennom alle diskusjoner, statusoppdateringer, grupper og diskusjoner på Willy Wonkas “interne Facebook”. Gjennom å finne hvem som har skrevet mest om fagområdet sorbet, kan vi mest sannsynlig også vise frem at “Roger Loompa” er eksperten på området.

Når vi i tillegg ser at Roger på Iskrem labratoriet har nevnt sorbet i sin siste statusoppdatering … kan vi vel si at vi har en vinner.

–

Målet er ikke å lage en haug med app’er. Langt i fra! Målet er derimot å gi brukeren rett svar på spørsmålet sitt – hver eneste gang.

Å lage løsninger som forteller oss mer om hva brukeren leter etter, gjerne allerede før de har gjort et søk, øker sannsynligheten for å gi det rette svaret med en gang.

Our goal is often to make “an internal Google” for our customers. That indicates that we must understand what you are looking for.

When you search for “365”: Are you looking for the person with the internal phone number 365? Are you looking for a colleague with the employee number 365? Or are you actually looking for the expert on your product, named “365”?

I am all for making one big search for your company! And I know I have colleagues that are magicians enough to solve these kinds of traps.

But: My theory is that a great search gets even greater when we know more about what the users are looking for.

These  are the two directions of people search:

Let’s pretend we make a search solution for Willy Wonka. Our goal is to let the Oompa Loompas spent as much time as possible making candy, and as little time as possible searching for recipes and phone numbers.

In addition to having one great search where they find everything, we also made two apps for the Loompas. One PhoneBook and one ExpertSearch.

The PhoneBook is exactly that: An internal app on the Oompa Loompas desktop, smartboard or smartphone, where they can search for the phone number of the loompa in the chocolate department that they don’t remember the name to. (Chill! They can separate their colleagues from each other even if you think they all look the same.)

This solves a common user need  that we find not only in candy factories, but at most of our customers. And we have a lot greater chance to give them the right answer doing it like this.

Because we take away all other user stories then “I want to find my colleagues contact information”, we can also take away almost all navigation and refiners – and end up with a much cleaner interface.

When an Oompa Loompa on the other hand needs help on refining the sorbet in the ice cream room, he can start the ExpertSearch app on his desktop, smartboard og smartphone.

The ExpertSearch searches within all documents written in the Willy Wonka Factory, and goes through all the discussions, social updates and communities on their internal collaboration system. From finding who has written and talked the most about sorbet, we can most likely end up with suggestion “Roger Loompa” as the subject matter expert.

When we see that Roger in the Ice Cream Lab. in addition mentions sorbet in his latest MySite Status, I guess we have a winner.

–

Making a lot of apps isn’t the goal in itself. Not at all! The goal is to give the users the right answer on top of the search result list, every time.

But making solutions that gives the user the opportunity to tell us more about what kind of an answer he is looking for, even before he makes the search, increases the likelihood of giving the correct answer right away.

I decided to use a website that lots of people use – or at least; a kind of page that people could relate to. So I redesigned Netflix’s search result in an hour – using the Phi spiral.
I made the first design, showing the result of a search for the actor Kevin Spacey.

This is the design:

When user testing the design at FiveSecondTest.com the 15 first test results showed me that the design was spot on. Of course, it would be more credible with a lot more tests, but seeing a clear trend in the first ten results often points out how the next 150 results would look like.

This is the result of the first and second clicks:

As the results show: My colleague’s theory is spot on.

But … when we look closer at the result we see that people are clicking at the face of Kevin Spacey. It that because the people we tested knew that we where looking for him, and that our mind then automatically looks for his eyes?

I made another search result. This time for the search query “horror movies”.

This is the design:

And this is the result:

As we see, the spiral still works – but not as distinct as test number one. But the power of human eyes draws our attention, I guess. So using images as the search results can give us challenges.

Still. Espen Klem’s myth: Confirmed!

A few weeks ago, my colleague Harald and I carried out user interviews at a customer for their “internal Google” solution. Before starting to developing concepts and interaction design, we wanted to properly figure out their users’ actual needs.

One of our findings was that the users generally know the type of content they are looking for. When caseworker Paul searched for “Vietnam Workshops” he knew that it was an application he was looking for – and not a colleague, a PowerPoint file or a news article on the intranet.

Armed with this knowledge, we got some ideas about how to improve their current search experience.

Previously, we thought that this was a good results page when searching for “Vietnam Workshops”:

But maybe this is the way to give Paul a better answer?

By asking Paul to help us decide on the “search mode” before we begin to guess his answer, we will most likely be able to give him a more accurate result.

However, when we user tested this a few weeks later we received clear feedback that the tiled design left the user feeling a little “cheated”. They had searched, but still needed to make a choice before finding the answer. This is also a well known search pattern – even explained by Monty Python.

Turns out Winnie the Pooh has the answer: “Yes please, I’ll have both” is the solution! The search results present a clear call to action to select a category, but with some results already presented on the first page:

A good argument for displaying results in the various search modes right away is to show Paul that we “know more than what he thinks.” By quickly scanning the results page, he may learn something new about his colleagues, see who’s associated with “Vietnam Workshops”, or maybe he’ll find something interesting in an intranet article; hopefully making his current task simpler and quicker to carry out.

But making it clearer that he has the opportunity to choose a search mode, can help Paul to help us give him a more accurate answer.

In Comperio, this is “our holy scripture”:

We believe that the best solutions hit the center of where the three circles of “Business needs”, “User eXperience” and “Technology” meet.

In my many years in the advertising industry I have fought with a lot of technicians – generally the ones that were going to code my web design. My belief was that what the customer, my colleague, and I had come up with was “the solution”, and my job was to trump through this design – regardless of how, for example, a publishing system was created.

In the news, some days ago, the Norwegian newspaper Aftenposten wrote that Russia’s defense is ravaged by an epidemic of pneumonia and other respiratory disorders. The star designer Valentin Yudashkin is being blamed for having designed uniforms with more emphasis on fashion than warmth.

Luckily, not all of the things we create here in Comperio are life-dependent solutions. But everything we make is business critical to our customers, and we can’t afford to make search solutions that look great, but that have a higher price for the customer than what they get back in the short or long run.

The three circles help us remember:

1. Don’t make solutions that do not gain the business
2. Make solutions that the customer needs, and that solves their “pain”
3. Make sure to adapt the solution to the technical platform (often predetermined by the customer). Don’t try to fight it.

It doesn’t help if the solutions look posh, sexy and wins prizes … if it doesn’t address the business needs, the customer needs and is impossible to implement.

1. Enlarge your search box! Why are you hiding it ? Screenshot: TMZ.com  My favorite search box: 2. Make your search button big and clickable. Screenshot: CNN.com (Edited. CNN uses the correct version) 4. Use colors common to your users! Screenshot: google.com

5 quick fixes for non-designers who want to enhance their search results page:

1. Enlarge your search box. Almost every second site I see, internal or external, “hides” their search box – maybe because designers think they’re ugly. If you want your people to search: make it easy. I like to add a little gradient on the top of the search box, and to make the corners round. That makes it look inviting to write in.
2. Make your search button big and clickable. Make sure the search-button is as tall as your search box, but make it come out of the page, with a clear color or an embossment. The goal is not to make it look cheesy… but to make it look clickable.
3. Use already designed material as an inspiration. Make sure that your search results, and the rest of the website for that matter, matches your company brand identity or design hand book. Use the correct colors and fonts – they are probably thought through by a designer already.
4. Use colors familiar to your users. - Blue is for links – Green is for URLs etc. telling visitors where the result came from – Red is for alerts and error messages If your brand identity doesn’t have hex-codes for these colors … ask your designer or design partner for then. Kindly.
5. Enlarge your body text size. Many designers tend to user small text in their sketches … maybe to get more room for nice pictures? Your users are probably interested in the result when they are searching, so why don’t we make the text readable. A nice size for a readable body text is 14 og 15px, with a line-height of 17/18 px. Not 12 px Arial…

And a general tip: Don’t try to reinvent the wheel! When working with search design, see how Google, Amazon and Bing format their URLs, links, file type-icons, etc. and make your version of it. Surely you can try another way, but then you should also user test it properly before you launch it.

What are your suggestions to improve search design?

A year ago the Comperio Design Team started with planning and researching for what today has resulted in a new brand identity. It includes a new logo, new branding of services and products, more colors in our color palette, the redesign of our offices in Oslo, Stockholm, London and Boston, and Comperio employees who proudly hand out their new business cards.

The research we did in advance of the rebranding was threefold:

1. A simple analysis of what didn’t work with the existing profile, how we used the logo and the logos we are being seen next to.
2. An internal survey to uncover Comperio employees’ thoughts about “who we are”.
3. Data collection from materials featuring those we consider to be the world’s leading brands, to see the characteristics of a brand as “not just a logo” – how the brands use colors, fonts and graphical elements.

The output of this research, was a brief outlining the need for a prouder, stronger, more contemporary logo, with heavy typography and black as the main color. It must be solid and without 3D effects or shadows, and in a sans serif font (such as Arial and Helvetica).

After several directions, sketches and internal meetings, this is our new logo:

A simple typographic logo, with details you do not see until you see it several times, where our new payoff, “Search Matters”, is given the attention it deserves.

This is our color palette:

We have had the orange and cyan color since the birth of Comperio, but the new profile has more focus on black and gray as well. And not least, we have added a new color: purple – that will get us a little less technical, and showcase the valuable creativity we have so much of, among other things, the design team’s resurgence.

Now we are looking forward to show of Comperio in magazines and newspapers, on websites and in social media and at conferences around the world for years to come … And we look forward to with even greater confidence to state that; Search Matters ®!

Some glimpses from our rebranded office in Oslo:

A little bonus material for my fellow design nerds:

This … is my new business card:

A 400 gram coated paper, with 5 four-color printing (purple Pantone color of the Twitter bird to avoid halftone in its beak). The back of the card has a 4-colored light gray (C3 M3 Y4 K0), with white logo, where the logo is raised with relief varnish.

Yes, it’s just a business card … and Jaguar is just a car :-)

Knowing one’s roots is important, and it feels good to point out where I stand as a practitioner of user experience design. After ploughing through years of bookmarks and downloaded PDFs – with subsequent strict self-censoring – I came up with this list of 12 extra important sources of inspiration. The selection is wide and eclectic – something pre-Internet, something from yesterday, something obvious, and perhaps even a surprise. I learn something by integrating this knowledge into my own design process, and I hope you find something you like as well. Enjoy!

Principles of Traditional Animation Applied to 3D Computer Animation [PDF] by John Lasseter (1987)

Good animation = good interaction design! John Lasseter, the grand old man of Pixar and Disney, explains the principles of communication through movement.

The Myth of Metaphor [PDF] by Alan Cooper (1995)

Use conventions, not metaphors! Good conventions are easily learnt and remembered forever – metaphors just limit our thinking to old habits and frames of mind.

The Paradox of Choice: Why More Is Less [PDF] by Barry Schwartz (2004)

Few, but good alternatives are best! Read the whole book, which explains why low expectations are the key to happiness.

Nudge: Improving Decisions About Health, Wealth and Happiness [PDF] by Thaler & Sunstein (2008)

As designers we have an obligation to help people choose wisely. Not because people are stupid, but because we all would rather not think for ourselves.

How To Kill Creativity [PDF] by Teresa M. Amabile (1998)

Purpose, mastery and control (and pleasure) are fragile qualities that flourish with care, and wither if neglected.

The Analysis-Synthesis Bridge Model by Dubberly, Evenson og Robinson (2008)

An analytical and straightforward presentation of the creative process, which also puts the need for design documentation into context.

Design Thinking by Tim Brown (2008)

User-centered design – said with other words. Design is not just about practical knowledge, but also important personality traits – such as curiosity, empathy and “formidlingsglede”.

Bringing Holistic Awareness to Your Design by Joseph Selbie (2009)

Cross-disciplinary collaboration permeates everything we do with user experience design. Nobody can find all the answers on their own!

5 Decision Styles. What is Yours? by Jared Spool (2009)

There’s not just one true good design process. We all take shortcuts – and it’s important that we know about the consequences of doing so.

What Goes Into a Well-Done Critique by Jared Spool (2008)

Giving and receiving critique is perhaps the most difficult – and also the most important – thing we can do to help each other become better user experience designers.

Guiding Principles for UX Designers by Whitney Hess (2010)

Design is a creative decision-making process, where principles are more important than your particular choice of user research methods.

The Fall and Rise of User Experience by Cennydd Bowles (2011)

What does it really mean to design great user experiences, and are really anything more than self-centered beta junkies with turtle-neck sweaters and Apple logos on our breakfast cereal?

Other sources of inspiration:

• So you wanna be a user experience designer — Step 1: Resources
• Essential Interaction Design Essays and Articles

Yesterday I went to the store to buy oregano and pizza seasoning mix, amongst other things. Usually I use two or three hours in front of the seasoning shelves to find what I am looking for (at least). But yesterday I found what I was searching for in two or three seconds.

Why? Because the designer of the seasoning labels was smart enough to think about how I search for the right product, instead of just making something beautiful.

This is what the shelves looked like:

All the seasoning labels were marked with a letter: the first letter in the name of the seasoning. And luckily for me the store employees had put them in an alphabetical order, so I in matter of seconds found what I was looking for.

Happy from experiencing a user-friendly design solution in my everyday life, I headed out to my Toyota Avensis with my groceries. And there, in the driver seat, trying to change my CD to the next song, I concluded that not all designers think about the users need:

What button do you press to change to the next song?

Make your search solution easier to use for your users! Try to understand how they think, and what their challenges are …

First of all: How do we define the term logical design? By logical design we mean graphic design with the user in focus: Design inspired by interaction design that takes the seriously principals of usability seriously – both on screen and paper.

If we say that design is “art”, we can define logical design as “crafts”. Attractive things that at the same time has a purpose, and that is like it is for a reason.

Logical design on a CD leaflet means the design that instantly tells the audience what kind of music they can expect when pressing play. Logical design on a website makes it a no-brainer for the customer to click the right places (thereby enhancing the call-to-action), what is clickable and so on. Logical design on a brand identity is the design that to the greatest extent possible enhances the brand values, without extra confusing visual elements.

But the challenge appears when our customers asks for web design with “an edge” or “a website different to all other websites”. Because with web design in particular, we have our customs and principals:

• Links in blue, underlined text
• The logo at the top left corner
• Obvious clickable submit-buttons
• The main text in black on a white background
• Clear labeling of what site you’re on
• Headline on every site
• and so on …

By now you’re probably expecting me to come up with a solution of how to combine attractive design with logical design. But again I turn again my own headline: Logical design and exciting design are not opposites. Logical design, done the right way, results in happy users and happy customers, because they both can take a look at the design, and say: “Yeah, that’s just the way it should be!”

Logical design is about making good design, without breaking too many of the rules that we know work – just to appear “innovative” and different.

Take a look at a beautiful design made more logical

Examples of websites we consider both pretty and logical to us as users:

The Norwegian site of the mobile operator Telenor.

The websites of the Norwegian Travel Operator Ving

The online Annual Report of Statoil.