How Linked In Got Skeleton Screens Wrong

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

Luke Wroblewski introduced Skeleton Screens in 2013 through his work on the Polar app, later acquired by Google. I also wrote a short write-up on Facilitating Better Interactions Using Skeleton Screens last year by applying it to mobile apps.

Following Luke's work and Medium's implementation of skeleton screens for images, Linked In implemented it roughly a year ago. The Linked In team picked few pages/screens for this implementation.

Notifications

The skeleton screen on the mobile web appears as shown in the screenshot above. The content appears to load in a gradually revealing fashion. It looks neat and clean.

So, What Went Wrong with Linked In Implementation?

Let us consider Notifications screen on Linked In, accessed over a mobile device. There are many additional elements on the actual screen, compared to the number of elements on the skeleton screen. For example, the carousel section, time component and ‘Send InMail’ button are not present in the skeleton screen. The user looks for a 1:1 content mapping which is missing in this case, hence leading to greater confusion.

Can This Be Fixed?

As you might notice, a natural mapping is missing in the Notifications screen.

Mapping is a technical term meaning the relationship between two things.

Consider the steering wheel in a car. To turn the car to the right, one turns the steering wheel clockwise (so that its top moves to the right). The mapping is easily learned and always remembered.

Natural Mapping

Natural mapping takes advantage of physical analogies and cultural standards (Another example - red traffic light means stop; green means go). The human mind is trained for natural mapping. As a result, products, in general, should exploit natural mapping to design enchanted experiences.

Skeleton screens need a worthy implementation. When poorly done, users are put off by the experience rather than feeling joyful about it.

How do you want your users to feel?

Facts, Figures, Data OR Good Experiences?

Take any weather app. It tells you precisely the weather for any particular day.

Planning for an overseas trip? Look up the weather app.

Visiting family in your home town? Look up the weather app. 

Sadly, all the weather apps do is to throw 'weather data' at you for different days and weeks. 

Can we make it better?

Throwing data at users is one way of interacting with users. Analyzing readily available data and making suggestions to users is another, in fact, better way of interacting with users. 

The Facebook website shows weather forecasts on days with unusual weather changes. For e.g., a hot day that is unusually hot, an unexpected rain or storm and so forth. This experience delights users, not the data.

User's joy is driven by good experiences, not facts/figures/data.

Do you throw data at your users?

Designing Intuitive Mobile Apps Using Machine Input

This article was originally published on Linked In.

Walk in to any Café Coffee Day outlet. The staff entices you, the customer with a 10% discount on the final bill if you install their app. Thereafter, on every visit to Café Coffee Day, the staffs asks you to ‘Show App at counter’ to get more offers and earn bean rewards.

The customer, now has to do perform below steps in roughly the same order:

1. Pull out the phone out of the pocket / handbag
2. Wake the phone up
3. Unlock the phone
4. Close apps that were left open
5. Swim through an ocean of icons / screens to find Café Coffee Day app
6. Tap on the app icon to launch it
7. Look for that elusive ‘Show App at counter’ bar
8. Show it off to the staff [who probably offer 1 buck off for every bean you have accumulated and add more beans for the recent purchase you just made]

Imagine, you visit one such shop with your family, with some bags around, toddlers/kids who are pestering you to order their favorite croissants, your phone in one hand and wallet in another, and then Café Coffee Day asks you to perform this whole circus of eight steps or more.

Well, you need to earn your discount. How else would you do that, if not for the circus? This experience left me thinking how can this be changed? Can we somehow walk into Café Coffee Day, place an order and the app/staff can automagically credit beans/discount to me and spare me the circus?

Can sensors do that? Can someone tell the staff that a customer just walked in with her phone, where the app is already installed and dying to be launched? Can the staff remember her face and app id somehow and create this magic manually, or even better magically?

How Square Wallet solved this problem by Jack Dorsey

Square Wallet, a company founded by Twitter CEO Jack Dorsey does this kind of magic. The customer can walk in to any store, and the merchant actually gets a notification that the customer is in the store and that he had a cappuccino last time and every single time. So the merchant can actually start making the cappuccino and say, 'Here Pari, here's your cappuccino,' and then it's done. It's super simple. And that's what builds loyalty. That's what keeps people coming back.... You go to the same store again and again, they know your name, they greet you with a smile, and they know your order. It's amazing.

Applying Machine Input to Flight Booking Apps

Mobile apps can be as smart as the Square Wallet app using machine input.

Machine input is the information that digital devices find on their own, whenever and wherever possible.

Many input methods like radio, sensors, camera, APIs, web browsers and many others collect actionable information rather than adding more screens or dropdown menus. Consider the context of a mobile flight booking app like MeRCI. Here is how machine input can be put to use:

Flight Booking

1. Auto-default nearest airport based on current location
2. Auto-suggest all nearby airports
3. Auto-populate frequently used airports
4. Save previous search information for subsequent use if booking is incomplete

Form Filling

1. Auto-fill forms from passport using camera
2. Support smart defaults like Country, Language, Currency, Zip Code, Country Code etc.
3. Contextual keypads for input fields like text, password, email and website which need different characters like *, @, ., / etc. to be typed in

Expense Management Using Camera

1. Scan Bills/Receipts
2. Auto-stamp location on receipts

Auto-sync

1. Auto-sync flight information to calendar
2. Provide disruption information to passengers
3. Inform users which blocks of time are available on calendar to pursue something at airports or in flight.

Guiding passengers based on location and barometer

1. Alerting travelers on clothing and transportation
2. Underground maps at train stations
3. Indoor maps in shopping malls
4. Smarter audio tours

Suppose, you are traveling to Finland. You look up the weather app and it says that the week you are in Finland, the temperature is 5 degrees Celsius. So many websites, apps and weather tools do that. Is that cool? Perhaps not. If the flight booking app that booked my flight ticket can look up the weather tools (APIs) on its own and tell me 1 week prior to my trip, “Hey Pari, Finland is unusually cold next week with all the unexpected snow, particularly on 4th Feb. You might want to pack lots of warm clothes.” Or even better. “Hey Pari, there is an unexpected storm in and around Helsinki. Here is an alternate hotel you can book without any additional charges.” Now, this is COOL!

Above listed possibilities are just the tip of the iceberg. Machine input, if used to its power can rid the apps of innumerable interfaces and scores of options and create humanizing experiences. Remember, Good experience design isn’t good screens. Its good experiences.

What do you think?

UX is NOT EQUAL to UI

This was originally published on Linked In.

Excerpts from the book, The Best Interface is No Interface.

This is UI:
Navigation, subnavigation, menus, drop-downs, buttons, links, windows, rounded corners, shadowing, error messages, alerts, updates, checkboxes, password fields, search fields, text inputs, radio selections, text areas, hover states, selection states, pressed states, tooltips, banner ads, embedded videos, swipe animations, scrolling, clicking, iconography, colors, lists, slideshows, alt text, badges, notifications, gradients, pop-ups, carousels, OK/Cancel, etc. etc. etc.

This is UX:
People, happiness, solving problems, understanding needs, love, efficiency, entertainment, pleasure, delight, smiles, soul, warmth, personality, joy, satisfaction, gratification, elation, exhilaration, bliss, euphoria, convenience, enchantment, magic, productivity, effectiveness, etc. etc. etc.

Somewhere along the way, we confused the two. And instead of pursuing the best, most creative, inventive, and useful ways to solve a problem, we started solving problems with screens because that was our job description. When we saw problems, we slapped an interface on it. UX stopped being about people, and started being about rounded rectangles and parallax animations.

It’s gotten to the point where many of our greatest minds aren’t being pushed into advancing science or taking us into space; they’re working at the new screen-based megacorporations that have surpassed oil companies in profits and political influence. They’re cranking out glorified digital billboards masked as websites and apps that are trying to monetize your eyeballs by pushing creepy ads onto all of your screens.

In the words of Jeff Hammerbacher, a former manager at Facebook and the founder of Cloudera, “The best minds of my generation are thinking about how to make people click ads. That sucks.”

"There’s a better path. There’s a better way of thinking. When we separate the two roles, we can start defining new, better experiences."Golden Krishna

Related Post
User Experience Design != Visual Design

The Traveler from Stone Soup - The Secret to Design Thinking by Jared M. Spool

This article was originally published by Jared M. Spool as Shh! Don’t Tell Them There’s No Magic In Design Thinking. I am reposting a part of the article - an inspiring story titled, 'The Traveler from Stone Soup' here.

[As written by Jared M. Spool]

The magical powers that people assign to Design Thinking reminds me of an old Eastern European folk tale. The story takes place at a time when walking was the only way to travel from one village to the next (before horses were invented). In that time, it was traditional to offer visitors to your village scraps of food to replenish their hunger after such a long walk.

Source: www.expectmiraculous.com

One traveler, upon arriving at a new town, knocked on the door of the first house he saw. However, despite the tradition, the homeowner didn’t offer any food. She explained that they were experiencing a drought and barely had enough food to feed their own family. They couldn’t spare a scrap.

Every house the traveler visited had the same story. It was a drought and there was no extra food.

When the traveler reached the center of town, he decided he needed to make something for himself. He took out his pots, started a little fire, and set up to cook himself some dinner.

He reached into his bag and pulled out a round stone. He set the stone in the bottom of the pot and started stirring. A crowd of villagers started to form.

“What are you doing?” a curious villager asked.

“I’m making Stone Soup,” the traveler responded.

“You can make a soup out of stone?” asked the villager.

“Yes, but a little water makes it better.”

“I have a little water in my well,” said another villager. He then ran off and fetched the water. The water was added to the pot and the traveler resumed his stirring.

“What will it taste like?” a villager new to the scene asked.

“Well, it would taste better with some carrots.” Upon hearing this another villager ran to his house to grab a few carrots from his garden.

Then another villager offered up some other vegetables he’d salvaged from his garden. And a woman mentioned she had some meat scraps on her pantry.

“All of it would make the soup even better,” said the traveler. Off they all went to grab what they had.

Soon the pot was filled with a lovely large stew. The traveler graciously shared his dinner with the villagers. Everybody had a grand time eating the Stone Soup.

After the festive evening, as the traveler was packing up to head on his way, he thanked everyone for helping.

“As a repayment for your kindness and generosity,” the traveler announced, “I’d like to give your village the gift of this stone. So, you can keep making soup even when you have a drought upon you.” The villagers all cheered with delight.

They thanked the traveler profusely as he made his way out of town. He continued on his way.

When the traveler was a few miles out of the town, he looked down at the road and spotted a lovely round stone. He picked it up and admired it for second. Then he dropped it into his bag and continued on his way with a smile on his face.

What Does the Traveler Think?

Design Thinking is our stone. When we apply Design Thinking, we bring the entire organization together to collaboratively solve big problems.

Yet, to me, that’s not the important lesson from the story. The lesson I take away is that, at no time during the story, do we believe that the traveler thinks the stone makes soup.

Instead, the traveler sees that the villagers need their thinking reframed. They have enough food to eat, if only they worked together. The stone isn’t magical. It’s a device.

Maybe the villagers believe the stone makes soup? Maybe a smart villager or two see what the traveler did? But at no time did the traveler himself ever believe the stone made soup. He’d starve if he did.

As design professionals, we shouldn’t let ourselves think there’s any magic in Design Thinking. Our teams, stakeholders, and executives can believe in it, but we shouldn’t. To do so would be to depend on Design Thinking having magic and such magic doesn’t really exist.

That’s the design professional’s secret. Shh! Don’t tell them!

Why Some Best Products Never See the Light of the Day

Many Revolutionary products die over the politics of egomaniacal leaders who neither have the talent to innovate nor the ability to let their teams innovate. While there are great leaders and visionaries who let their teams build great products, more often than not, few such leaders are at the mercy of so called *power people* who make decisions in favor of bank balance rather than real users’ needs. Short sightedness takes over long term investment in users. Let us take a look at 2 great products that died an early death.

The Magic Cart that Never Went Shopping
Few years ago, two Indian students studying in Singapore saw a problem (and an opportunity) with long check-out lines in super markets. They studied the problem for months visiting supermarkets, identified problem patterns and came up with a simple solution: Provide a seamless check-out experience.   These students designed a magic shopping cart that calculates the bill amount automatically, so that users could just pay and leave the billing counter, hence taking away the manual billing time by the operator. Here is how it worked. As soon as a shopper picked an item and put it into the shopping cart, the item would be scanned automatically by a scanner placed in the inside walls of the cart. The cart was designed such that the item could not get inside without passing through the scanner, whilst not making shoppers conscious of the way they put their items into the cart. This was in the year 2001. An auditorium of 1000+ students were floored by the idea, even though the retail revolution was at a nascent stage at the time. 

Fast forward to 2016. Amazon Go has wowed many shoppers. Amazon started actual work on Amazon Go in 2012, 11 years after what two young students had created with magic shopping cart. What is it that those two Indian students did that failed them? What did Amazon do that put them at the center stage of the world with Amazon Go? The easiest answer might be, ‘Amazon has a lot of investor money’, ‘Amazon is  a giant’,  ‘Those two students did not make use of the right ecosystems’ and so forth. In an ideal world, what is it that makes some products sticky and fail others? Oh! I forget that we are not in an ideal world, or so we think.

A Self-Healing Product couldn’t Keep Itself Alive
In 2008, I worked on a self-healing product that could detect different kinds of problems in a computer or a laptop and also fix about 70% of those problems. The only problems the product couldn’t fix is like a defective modem or manually connect LAN cable. The technology used in that product at the time if applied to mobile devices and appliances even today, would turn out revolutionary. Yet, that product got sold to a services conglomerate because the shareholders thought that this product wasn’t making money and they didn’t want to burn anymore on a *dying product*. 

Product Success Depends on Office Politics
So, what makes products successful? Do best products really see the light of the day? As we celebrate the success of products like Amazon Go or Kuri or Pepper, we must remember what Golden Krishna once said: 

“So while we sometimes recall and retell technological history through effortless tales, the reality is that many meaningful technology accomplishments at the most influential companies are the result of successful internal political wins, a slow climb of convincing the right people in the right place at the right time that a good idea is actually good. What you see as a consumer is not truly the latest and greatest, but instead what managed to squeeze through the available channels, and somehow convince enough influencers in the company that they wouldn't get fired for agreeing to approve it.”

Next time, when you see great products come to life, remember it was the work of a courageous bunch of people who stuck to their guns because they dreamt of a better world for themselves and the rest of the world.

This article was originally published on Linked In.