UX and all... - Random thoughts, ideas and opinions on user experience, usability, interaction design, online product management and anything remotely related to web or mobile.

Progressive disclosure of pagination

Today I browsed Facebook killing time and looking for some old time UTS friends.

Facebook immediately figured what I was up to and prompted me with a search feature to find my old uni friends who graduated in 2006.

Nice - I thought and I clicked on to find myself on the following serp...

I didn't notice the "...over 500 people" counter on the top left as my eyes briskly fixated on the top right pagination controls (a natural, maybe subconscious user reaction on every result page - quickly find # of pagination sets to gauge if your search is likely to be easy or needle-in-haystack one).

I've figured - "oh ok, only three pages? ok, I can afford that".

Having skipped to the next page, I saw this

and then this....

And it kept growing till I think 26.

I don't know if progressive disclosure of pagination numbers is something new, but it's definitely a smart strategy.

For starters, it's cleaner and takes less real estate. Secondly, it elegantly reduces the psychological stress triggered by looking at something like this...

"Prev 1 2 ... 25 26 Next". <-- it yells - We have a gazillion results, you sure you have time to go through all that.

Put it this way. If the first serp opened up with a format displaying the entire set up to 26, like I've shown just now, I'd have never clicked on to the second page, since my perceived chance of coming across a friendly face in the crowd of over 500 folks was close to null.

Well done facebook UX team. Now, take it one step further and move the "...over 500 people" to the very bottom of the page.

Loading mentions Retweet

Comments (2)

Posted 1 month ago

UX LONDON. Notes. Part II

"Make people better at something" - in the years to come this will be our most important mission as UX professionals.

- take-away from the Josh Porter's workshop

Read the first part of my notes from the London UX 2010 - here.

Peter Moreville - IA with maps (workshop)

His deck is available here

- Factors influencing UX: useful, valuable, credible, desirable, accessible, usable, findable (in no particular order)

- desire lines - paving the cow paths - where people want to go?

- usability = quality

- vw.co.uk - good faceted search - cool way of removing the results (first they fade out, only then disappear)

- IA is a structure - it's what you touch, UX is what you feel (ie. your time spent at your house, vs the structure of the house)

- approach: outside in vs inside out

- Land's End - check out their faceted search solution - a mix of navigation and faceted in one thing

- the right way to wireframe - series of videos on wireframing

- user experience treasure map

- leaving flatland - cool deck on service design & cross-channel UX

- Scales of Experiences by Mike Kuniavsky

- service blueprinting

- check out Glushko & Tabas - guys who write on cross-media UX

Dan Lockton - Design wtih Intent - how to influence behavior online (workshop)

His deck is here

- influencing users behavior could have a material impact on our planet - for example - if we are able to change the behavior of people to only heat as much water as they need to boil for their cup of tea / coffee (if we reduced the behavior of overfilling boiling water in kettles for making coffee / tea, we would have saved enough electricity to power all street lighting in the UK - 1.27 TWh wasted each year in the UK simply from unnecessary overfilling of kettles).

- designwithintent.co.uk - you can get his toolkit cards from there or order online

- affordances vs constraints - influencing behavior

- " ...(as designers) behavior is our medium"

Josh Porter - Designing for the usage lifecycle (workshop)

His slides are not available for download :(

- ABtests.com

- "it's more important where your users are in the lifecycle ,rather than knowing who they are"

- Messaging / copywriting is the biggest problem in design these days (ie. We provide robust solutions :)

- reductionism - getting rid of screens / steps / fields is still the best way to increase the signup / conversion, reduce users pain

- "problem of signup is not in forms, it's in users' heads" (forms are increasingly better - short, usable etc, the hurdle of signup is about motivation!!)

- 3 levels of motivation

1) I know I want to sign up

2) I want to make sure this is for me

3) I'm skeptical

we tend to design still just for 1), how about 2 & 3, they're prevalent today

- hunch.com - example used a number of time during the conf

- "your reputation is equal to the sum of your past actions within a community"

Jeff Patton - Real World Agile UX design (workshop)

His deck is available here

Very informative and practical workshop. There were a lot of techniques and tricks discussed, so a bit too much to cover in one short blog summary.

If you're interested in how to create practical personas, write user stories, create functionality maps or run product workshop with clients, visit http://agileproductdesign.com/ and view the presentation from the UXLondon.

Big thanks to UX London organizers for putting together such a great gig. See you guys next year.

Loading mentions Retweet

Comments (0)

Posted 1 month ago

UX LONDON. Notes. Part I

"If ease of use was the only requirement,
we would all be riding tricycles"

- from UX London Conference
This is a first post featuring my notes from the UX London 2010 conference. Second part is coming soon, so watch this space.
Disclaimer: the notes are pretty skeletal and selective, sometimes I don't draw sufficient context for each point I jotted down, so make sure you refer to the slides of each presenter. Lastly, my bullet points suffer from punctuation mistakes and sloppy wording, so keep that in mind.
So how was UX London?
It was a great event. Very inspiring, opening my head to new ideas and pointing me towards unchartered (on my map at least) territories.
Regrettably, the gig was sightly less practical then I initially expected. Still, got a bag full of tools, tricks and ideas I've started applying from day one.
The overarching take-away from UX London, at lest in my mind, was a solid grounding of UX in the domain of psychology.
Whereas before I was more associating user experience with design, technical usability, computer interaction, and the machine - in general, approaching it as a technical domain more or less; After the event, the weight of UX shifted heavily onto the humanist side of the spectrum.
You may point, that the UX has always been about users, thier emotions, drivers and motivations. True. But it somehow, only now, downed on me. Better late then never :)
Jessie James Gareth - Building Blocks of UX

(His slides are not available. Pity. His talk was awesome)

- Before everyone was doing everything, now growing specialization of UX: retail, services, web, touch, mobile etc. What is your medium?

- UX is: ephemeral, subjective, intanglible

- UX happens only after our designs touch users, before that we can't really talk user experience

- Bethoven as a UX designer - his deliverables (notes), his implementation team (orchestra), experience (music)

- Ingredients of UX (look below)

- 3 things users bring to thier experience: capabilities, constraints, context

- there is no such thing as information architecture, if you think about it. We do not sit in vacuum. If we touch users we create experiences, not architectural archetypes.

- we can think of UX much wider than we do now. Other fields that draw upon UX: fashion design, typography, architecture

different levels of engagement

Perception:

- engagement of visual

- engagement of music

- engagement of touch

- engagement of smell

- engagement of taste

- balance and motion

Action:

- perception of the body - ie. wii games

Emotion:

- engagement of the heart ie. theme park designers

Cognition:

- engagement of the mind

Each experience will have different levels of each ingredient, each experience is different.

Peter Morville - Search Patterns

(click to download his presentation)

- patterns (quit, narrow, expand, trashing, pearl growing, pogosticking) are available here

- Winchester Mystery House - a house built with no blueprint, which was built by a lady who was afraid that when she stopped building it she would inevitably die. Sometimes web projects resemble that Winchester house: no blueprint, just keep coding.

- we should design to support learning, not only opitmize for usability / efficiency but primarily support learning (especially complex financial products)

- help users before they get to results (autocomplete, hinting, autosuggest - try yahoo search) and after (narrow search, expand, offer alternatives)

- google serp clicability, 43% 1position, 15% 2 position, 10% 3 position, 5% 4th and below!!! Hegemony of #1 & SEO

- on serp default sort - Always get best stuff on top - of course the question is what is best

- search with microscope, search with telescope

- search is project and a process!!!

Multichannel interfaces as a next big thing in UX:

- example: ipod + itunes + istore

- where to place features

- consistency is a key (visual, naming, navigation conventions)

Joshua Porter - Metrics Drieven Design

(click to download his deck)

- balance between intuition driven and data driven design. We should find a balance and sweet spot between these two approaches.

- who in your organization, makes a decision on what design to choose? highest paid person in the room, bosses, "squeaky wheels", designers, anyone else? who should make these decisions?

- reducing # of pages is till this very date the easiest way to increase your conversion

- devising the UX plan focus - research and talk to your existing happy customers - see what they say

- hardest problem in UX - migrating users right onto this diagram

interested --1---> trial / beta ---2---> customer ---3---> passionate customer -- 4--->

1) signup

2) onboarding

3) engagement

4) referrals

- define metrics for each of these steps ie: engaged = 2 posts per week.

- if you can't measure it, you can't improve it.

- after you got an idea what kpi / measure corresponds to what step in your lifecycle, you can start thinking of improving and measuring your metrics.

Actionable Metrics:

- AB tests

- Funnel Metrics & Cohort analisys

- Customer satisfaction over time

- Net Promoter Score - these who recommend minus these who detract, useful tool

Cohort analysis as a useful tool to measure whether your design / site / business improves over time. It looks at chunks of your customers acquired over time and see what proportion of them is still active till today. Without it, it's hard to gauge if your site overall is becoming better or worse, as your total numbers keep growing.

- interesting case of green button vs red button. Red outperformed green by 21%.

Steve Anderson - Seductive Interactions

(His deck is available here)

- sequence your profile filling activities into a number of small items and encourage users to fill it out over time - offer profile completeness (ie. linkedin profile)

- selecting bands that you like on the ilike.com site is done in a visual way, you just click on the band, don't need to type anything, you just click on the band's image

- compete against yourself - you've got 10 points until you reach the next level

- social component

- usability - about removing friction, ux - about increasing motivation - psychology

- drive on the curiousness factor - mystery car (lego), mystery restaurant

- be funny - example - after user ticks on agreeing with your terms and conditions, "Record! You've read our terms and conditions in 2.3 seconds".

- unlocking things / functionality as you build some points

- scarcity - exclusive invites

Michael Johnson - Pixar - Building tools for building stories

(his slides are not available, Pixar lawyers?)

- "Quality is the best business plan" - John Lasseter, Chief Creative Officer - Pixar

- "Pain is temporary. Suck is forever"

- 51% is play well with others

- "I want to fail as quickly as possible"

- Each movie is virtually made twice. Once it's a prototype, based on story boards, but still with voices, music, dialog, a full feature film. Based on that, the movie is tested perfected and only then a final movie is being produced.

- Movie has 3 layers: 1) World 2) Characters 3) Story. When you have a problem, go back to the previous layer and fix it there.

- What makes a good employee / developer? codes well + codes fast + always has another idea + 51% is work well with others

- Art is a team sport

I started with a quote and I finish with one:

"...Where a lot of people would ship it,

I say disassemble it and put together again...and that mindset is what contributes to our success"

- Michael Johnson - Pixar

Loading mentions Retweet

Comment (1)

Posted 2 months ago

Padlock trick. Can favicon help you convert better?

Yes it can. At least in some tiny part, a 16 x 16 pixel logo in the url bar can have a small contribution to your conversion. And it's not about the touchy-feely branding, but about making your user notice they've progressed onto the SSL-protected part of the site and it's all nice and safe from here. Here's how it could work.
Each e-commerce transaction goes via 2 states:
1) customer arrives on the site (http:// - unsecured part of the site)
2) having decided to purchase the customer clicks on the 'proceed to checkout' button or similar call to action and enters an SSL protected part of a site, where the e-commerce transaction occurs via a personal detail forms or a credit card payment (https:// - secured part of the site)
Let's look at some examples. That's how Amazon's URL looks in different browsers at these 2 distinct steps:
On Firefox
1) upon opening the site you see this:

2) when you decide to progress to check-out you see this:

(Firefox indicates entering SSL zone by including a certicate owner's name on the right hand side of the favicon)
On Safari
1) unsecured

2) secured

(Safari seems to disregard this problem completely and does not change the url bar at all. Little chance the less savvy user ever notices the https)
On Chrome
1) unsecured

2) secured

(Chrome does quite a lot to notify the user of the ssl state. Little padlock however is positioned on the far right side of the URL, hence it's often missed, as users don't look there)
Now. Here is the interesting part. What I've noticed on many occasions while doing usability study for my clients - Before the customer starts entering their credit card details online, often they double-check that the site they're inputting their CC on is secured and "has this little yellow paddlock". If it is, then it's good to go and the site is safe.
I kid you not. I heard from my usability participants that the "little yellow padlock = safety heaven" so many times that I've decided to find a way to overcome browsers' inconsistency in displaying SSL area.
The simplest way, it seems, is emphasizing the SSL by applying a special format of the favicon on the secured site. So now, it could look like this:

Basically, the idea is simple. I'm proposing one format of favicon for the regular pages and another type (ie. with padlock) for SSL protected pages.
I realize it's a tiny little thing and its impact on conversion might be minimal. Still, worth a shot if you serious about boosting the perceived safety of your site.
For a small local shop, this will unlikely make any visible contribution to the revenue. For a bigger player, like Orbitz, it could have a tangible effect and pay for drinks at their annual Christmas party :)

Loading mentions Retweet

Comments (9)

Posted 3 months ago

Best signup is no signup

What is one thing you need in order to create a new account for your user? Email. That's it. You don't need to ask for first and last, DOB, passwords, street address or nick names. At least, not right away.
Yet, countless of online services (hell, mine including) insist on asking those premature questions as each new undecided and puzzled user wanders in and decides to try them out. Long form, consent to Tc&Cs and a big fat signup button are still a prevailing recipe for registration. Ban unregistered from any solid functionality. Show off what your site can do & magnetize visitors to the big signup banner. Roll out a long registration form asking to understand, trust and care enough to fill it out and convert.
Registration form usability, or rather lack of it, has been part of this game for so long we kept accepting it as a fact of nature. Even a 5% success ratio on a signup form seemed reasonable to ask for.
Having just finished Luke Wroblewski's Web Form Design*, which talks a lot about signup usability, I've turned a big believer of the "best signup is no signup" motto. True. It is slightly exaggerated. End of a day, you need at least that email address to fully "capture" your user. Still, idealistic vision of - no signup required - keep me motivated to get there one day.
I've done a quick research and here some startups that put traditional signup model upside down:
- posterous.com (Blogging service. Email your first blog post to post@posterous.com and you're done)
- szerlok.pl (Polish classifieds site. Don't want to create a permanent account? No issue, publish your ad, but before it gets online, you need to click an authorization link in your mailbox, this way you can use the site and publish on a regular basis without having to create an account at all.)
- nozbe.com (Productivity tool. Asking 2 most basic questions: name & email. Hit enter, you get email with a confirmation link. Click the link and then set your password. By avoiding password and re-enter password fields on the first signup screen Nozbe improved the signup conversion by high margin.)
- tripit.com (Itinerary planner. Just forward your travel itinerary to tripit's generic email. Tripit will do the rest. You get the return email with a link to your tripit page. And yes, when you go there, you get to see an account creation page, but it's all optional, you can skip it and use tripit loginless.)
Registration usability. What can you do to enable a more user friendly (and successful) signup?
- Cut out all the fat from your standard signup form. Really. You need nothing else but the email field. You can ask for other details like name, DOB etc after the user clicks on the confirmation link.
- If you do require additional information from your user - break up your form into a number of steps. Make it fun and informal. Good example is displaying a % of profile completeness or handing out some perks for users who fill out all details.
- Evolve the old model of account holder / not account holder. Introduce an in-between state: tester/user (even a permanent tester, sometimes). Szerlok.pl strategy
- Adopt someone elses platform to capture your users. Facebook connect, Twitter, Google etc.
- Let your visitors experience full funcionality of the service before they officially signup.
- Use email extensively. People live in their email. Use it to confirm user's action online, use it to send a pre-generated password, use it as a signup platform - Posterous case.
- Don't ask to create password right away. Wait till the user clicks on the email confirmation link. Or just send him a pre-generated, but friendly sounding password.
- Rely on other mechanisms to welcome & recognize your users (cookies, unique browser settings combination). Sure it's not 100% accurate, but maybe it will do the trick. You can always resort to "Click here if not Maciek" functionality.
- Clearly state out benefits of registration on the signup form.
- If you are asking for password, don't go overboard with your security requirements. Do you really need a 7digit alphanumeric format?
- Use lazy signup strategy. Don't make your users think they're actually signing up. Devise the alternative signup path and ask for email as part of some other procedure on your site. At pstro.pl we have two signup paths. One is on the actual registration page. There we ask for email, password (and other redundant details which we'll remove soon). The other one - used way more often - is part of a write review page. We just stuck the email field to the review form. After user submits the review, she'll get email with authorization link, after clicking on the link, the review gets published and the user gets official email notyfing her that the account was created and what her temporary password is.
---
*Make sure you read this chapter from Luke's book about signup forms.

Loading mentions Retweet

Comments (4)

Posted 4 months ago

Browser support in navigating search results

I believe that browsers should not stop at rendering html. They should also try to predict our browsing patterns and facilitate more efficient web browsing experience.
For example. One of the most common use cases, especially in search or online shopping, is viewing search results and clicking on a tiny "next" link at a bottom of a page, to jump to the next page of results. Why doesn't the browser help me with that? And there's a lot to help with. Just check out these different styles of pagination patterns*

Each site, uses a different pattern. Sometimes the next button is not even there, but a tiny > symbol pointing on which takes some mouse dexterity.
If you think about it, the matter is not trivial at all. My guess is that the average user wanders onto some kind of a search results page between 3 to 4 times a day. It can be google, price comparison, event site, online travel, or any online store for that matter, ebay, blog, news site, you name it.
Anything that displays its stock / content among many similarly looking pages.
My life would be a little bit simpler if my browser could discover that I'm on a search results page and offer me a quick & consistent way to jump to the next page (or the previous one). Take a look here...

How is this supposed to work? As soon as the scroll bar hits the bottom, the browser would display "back" and "next" controls sticking to the bottom of the browser chrome. If I click on "next" I jump to the next page of search results. I assume the browser would easily decipher where to send me to, having discovered a pagination schema on that page and parsed the html looking for a link to the next page.
Actually, we could take this concept one step further and use these controls on regular pages as well, duplicating commonly used "go back and forth" buttons, also located at the top. Redundant - yes. Required - too. It would be really useful, especially for PC folks (on their laptops with no mouse) who are forced to use browsers' scrollbars to scroll the pages. Why make them run with their cursors all the way to the top to click the browser back button?
What do you think?
*All images come from this article on pagination patterns. Thanks Smashing Magazine :)

Loading mentions Retweet

Comments (4)

Posted 5 months ago

Design of Everyday Things

Just finished reading the marvelous "Design of Everyday Things" by Donald A. Norman.
It's a great read. Though mainly about designing tangible objects like doors, knobs, faucets or ovens, Norman manages to outline universal laws of good design, also relevant for the web. Despite its 1988 debut, the book is still fresh and not at all obsolete. Overarching principles of design are constant regardless if you you design airplane cockpit controls, typewriters or iphone applications.

According to Norman, fundamental ingredients of designing for people are:
- Affordances
- Constraints,
- Mapping,
- Feedback,
- Making things visible.
Affordances. Affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. A chair affords ("is for") support and, therefore, affords sitting. A flat plate on the door affords pushing - meaning, the door is meant to be pushed. An empty container affords filling and so on.
A good designer makes sure that appropriate actions are perceptible and inappropriate ones are invisible. Rule of thumb - if instructions have to be pasted on something (push here, enter this way, turn off before doing this), it's badly designed.
Constraints. The surest way to make something easy to use, with few errors, is to make it impossible to do otherwise - to constrain the choices. Want to prevent people to enter memory cards into cameras the wrong way, design them so that they only fit one way.
The thoughtful use of affordances and constraints together in a design lets a user determine readily the proper course of action even in a novel situation.
There's an interesting relationship between affordances and constraints. They're in opposition to each other. Affordances suggest the range of possibilities, constraints limit the number of alternatives.
Mapping is a technical term describing the relationship between two things, in this case, between the controls and their movement and the results in the world.
For example, if you steer a car, mapping is following: to turn a car to the right, turn a steering wheel to the right, to turn to the left, turn a steering wheel to the left. Steering a car is a great example of intuitive and simple mapping. On the contrary, compare with bad mapping like unintuitive placement of knobs operating your stove hot plates. If they were done right, you didn't need to double-check each time which particular knob operates the bottom right burner.
Feedback. It's important to immediately see effect of our action. Without feedback one is always wondering whether anything has happened. Maybe the button wasn't pushed hard enough, maybe machine stopped working, Feedback is critical.
To sum it all up. Great design is where all relevant things are visible, primary actions are clearly affordable, unintended actions are constrained, the design uses intuitive mapping, and finally, users get prompt feedback of their actions.
Norman makes some very interesting observations:
- On accidents: Apparently, in most cases, major airline accidents or nuclear plant malfunctions, are not due to human error (which is a common belief), but to inappropriate design of the controls! If it wasn't for bad design of equipment, we could have saved thousands of lives.
- On errors: Assume that every possible mishap will happen, so protect against it and plan for it. Make actions reversible. Try to make them less costly.
- On users: There is no such thing as the average person.
- On functionality: The system should provide actions that match intentions.
- On ease of use: Most things are intended to be easy to use, but aren't. But some things are deliberately difficult to use and ought to be. The number of things that should be difficult to use is surprisingly large ie: security systems, dangerous equipment, bottles of medications or games.
At the end of the book Norman summarizes:
1. Use both knowledge in the world and in the head
2. Simplify the structure of tasks
3. Make things visible
4. Get the mappings right
5. Exploit the powers of constraints-Natural & Artificial
6. Design for Error
7. When all else fails, standardize
- Not intending to overuse inverted comas in this post I purposefully omitted them, but most of the above was authored by Donald A. Norman, author of the book -

Loading mentions Retweet

Comment (1)

Posted 6 months ago

Entering and reviewing long number sets

One of the most regular problems I experience as a user is having to double-check if the long number that I've just entered in the field is correct.
In most instances the input field contains tiny little digits squashed together, so comparing the entered number with what I have on paper is very cumbersome.
Usually it happens while entering my credit card number in the online transaction or making a bank transfer and inputting a long IBAN number from the paper invoice.
Example is below. Now, try to quickly check if what you've entered is correct. Hard, isn't it?

Since I think, it's not just me having this problem regularly, I thought how to fix it so that comparing numbers of the screen, with numbers on paper is much much quicker.
1. Simplest way is to make the field in question much larger with XXXL digits, while keeping other fields regular size.
2. Other way is having all fields regular size as the page loads, but next to the bank account number field, put a small A+ icon. Clicking it, would quickly magnify the digits within that field.
3. On rare occasions, banks, merchants or payment gateways decide to break up the field into subsections, either by displaying separate fields (as per below) or forcing a space between every fourth digit as the user enters the number.

4. Lastly, we could adopt an iPhone solution and give users a little magnyfing glass as they hover their mouse over the field. It would simply magnify the digits in sets of two, hence giving you quicker tool for comparing the numbers. (as per the first image).
All in all. Problem isn't particularly hard to fix, so I wonder why banks don't bother fixing it. Don't they usability test their users?
Such a tiny thing, but surely would make millions of users happier, or at least less frustrated.

Loading mentions Retweet

Comments (0)

Posted 6 months ago

Designed a home tab for the new Mozilla browser

What better way to spend a Saturday afternoon than mocking-up a home tab for the new Mozilla Browser :)
(Having uploaded my Mozilla Home Tab Challenge video submission to vimeo, I've realized I'd gone overboard with the length of my video - over 10min - hope mozilla guys won't punish me for it.)
Anyway, here's a quick run down of my proposal:
1. Home tab is a place where you should begin your browsing experience, not where you read your emails, chat to people or manage your extensions. I've seen many submissions that run a lot of these functions and I think this is too much.
2. I believe browsers should finally adopt a log-in option. This would allow for remembering sessions, settings and bookmarks between your home computer and office machine. Also, I propose that browsers learn your behavior and browsing patterns, so that when you come back from work and open your home computer, the home tab wouldn't offer you the work related page, but the page you're likely be browsing in your leisure time.
3. Common solution to the home tab these days is displaying a matrix of site screenshots tipping you where to go. I think it's cute, but not ideal. These thumbnails do not do a great job at representing specific content as they're just high level screenshots of the page. Much better way of showing an informative summary of a site/page is what facebook does with the links you publish on your wall. They automatically generate a text snippet of that page, add a visual cue on what the link is about and include a title / header. This is a more superior way of displaying page thumbnails and I go with this approach in my project. On top of that I introduced a site view. Site view contains just logos of sites and below each logo show top level domain names. Page view, in contrary, display a low-level facebook style thumbnail as well as the full URL. At any time you can switch between the site view and the page view, depending on whether you want to find particular content / article or just want to go the the site you've bookmarked a while ago.
4. Last but not least. I believe browsers shouldn't be only about rendering html. First and foremost they should help users...browse and discover new content. Sites like stumbleupon, digg or delicious really exploited lack of that mindset among browser product managers. Think about it. Firefox (or any other browser for that matter) is in much better position to tell me what hot new content I might be interested in. Not digg or others, but Firefox. They churn tons of relevant information about my browsing behavior, what time I go where, what sites I had visited before & after, how long I spent on each page, what was likely to trigger me leaving the page. Not only can they see this thread of information about me, but they can tap into the patterns of millions of users, datamine and produce great recommendations based on my location, interests and demographics (provided I agree to disclose them) or time (hot sites vs evergreens).
There are 2 sections in the header of my home tab: my sites & hot sites.

My sites are either those that I visit regularly, visited recently or am likely to visit now, dubbed - current, as well as my bookmarks.
Hot sites are the pages recommended by my friends on facebook, twitter and other social platforms, as well as sites recommended by the firefox itself, as per my comments above - named suggestions.
Here are the wireframes:
Current tab - sites view (squares with crosses are big logos of the sites)

Current tab - pages view

Bookmarks tab

Friends tab

Suggestions tab

Loading mentions Retweet

Comments (8)

Posted 6 months ago

Where online meets offline. Metaphors for e-commerce.

I've made a strange self-observation recently. Being so engrained in online, working in the field, churning web projects and talking web apps over beer with friends, I got into this habit of looking down at the so called - Offline. Offline was lame, it was 1.0, passe and backward - I could hear me thinking. Offline seemed like a different world. Distant and irrelevant world. My business was online, my users were online, my friends were certainly online. Pretty much everyone lived and breathed online. That was a great dream - happily, I was on a different planet. Or was I?
I was in that false mind-frame for a long time, until one day I came to a realization that the business I've created - pstro.pl - was destined to be more offline than online. Online was just a conduit for offline emotions of my users. Not only were my users offline (I sort-of sensed that before), so were to be my paying customers and the very businesses my users wrote reviews about. I had to accept a fact that, in order to succeed with pstro.pl I had to be more offline than online. My sales-force, my marketing, and my thinking, all needed to be offline anchored or at least firmly touching offline if I wanted to make a difference.
Today, I make it a point to learn from offline and inspire myself with examples, cases and successes from offline. It's almost a game. If I have a problem in online, I try to see how a similar case was solved offline. And once I started doing that, a whole new perspective opened up.
Someone said, that real innovations and breakthroughs happen on the boundary of domains. In that weird zone where blue ocean dissolves into red waters, in that funny spectrum where you can't tell one color from another. In the conceptual no-mans land, where every concept seems out of place, and certainly where busy (read: blind) people don't stop-by.
I've created couple of scenarios, in attempt to open up our creative mind when thinking about online:
- What if online products experienced wear and tear? An unmistakable quality of some real-world items is that they get better with time as they wear-off, could that work in online?
- What if attention span of each new customer arriving at your site resembled that of a 3 year old receiving a new toy for birthday?
- What would you see if you stapled yourself to your online order? Would it be a long / short / enjoyable journey?
- Imagine you have to have a changing room in your online store, what would it be?
- What if there was no SEO, no search engine crawlers indexing your site. Would your site look, feel different to your users? would they like it more?
- What if your users were entirely text-blind (they actually are)?
- What if switching from / to a competing website was equivalent to switching from car to car (note: stearing wheel, all controls, gauges, everything are always in the same place, regardless if you drive Kia or BMW)
- What if customers visiting your site could actually see and talk to each other, like they do in real shops
- Have you ever seen that guy wandering cluelessly between isles trying to find one particular product. Multiply him 1000 times and picture them on your site. Scarry?
Finally, read Why We Buy. Paco UnderHill is to offline shoping science, what Jackob Nielsen is to online user experience.
Last but not least. Go find your offline counterpart. A business that does what you do, but offline. Talk to the owner, take him/her to the pub, drink some beers and ... learn.

Loading mentions Retweet

Comments (4)

Posted 6 months ago

« Previous 1 2 Next »