We Don't Need Mobile Apps. Do We?

A product evangelist I recently spoke to, as part of a technology forum asked, “Why do we need mobile apps?” At first, I got into an argument on how the mobile apps are changing the world. Changing the world – yes to some extent. But are mobile apps REALLY changing the world? Am I saying that creating another billion mobile apps will wash out out poverty, reduce crime, provide reasonable healthcare to senior citizens or other valuable benefits to the society? May be not. I kept wondering about this for next couple of days.

This article is not a justification to the million dollar question, “Why do we need mobile apps?” This is a view of how I think mobile apps can impact the world in its own way.

We need mobile apps for three reasons if not more:

1. People are mobile and expect products to be accessible on the move
2. Mobile app is another new channel
3. Mobile app is a strong touchpoint in customer experience

Let us look at each one in detail.

People are mobile and expect products to be accessible on the move

According to a study done by Statista in 2018, the number of mobile phone users in the world is expected to pass the five billion mark by 2019. In 2016, an estimated 62.9 percent of the population worldwide already owned a mobile phone. The mobile phone penetration is forecasted to grow, rounding up to 67 percent by 2019. China was predicted to have just over 1.4 billion mobile connections in 2017, while India was forecast to reach over one billion. By 2019, China is expected to reach almost 1.5 billion mobile connections and India almost 1.1 billion. 

Most of the mobile market growth is attributed to the increasing popularity of smartphones. The users are all over the smartphones. So where should the products be?

The products better be on the smart phones.

Consider Oracle, SAP and other enterprise giants. Each one has built a mobile offering in the past 10 years for better outreach to their customers and users.

Mobile app is another new channel

A channel is the medium of interaction between a customer and an organization. Mobile app is a key channel in today’s world.

Each organization has its own set of relevant channels built over a period of time. Some prefer brick and mortar stores, while others are on the internet. Even on the internet, organizations are faced with the question of whether they must just have a a website or a mobile app, live chat support, chatbot or some latest technology offering. Take the example of Pepsi soft drink. Users can buy it from supermarkets, retail stores, order it from online marketplaces or vending machines placed in public places. Now, Pepsi might be faced with the challenge of adding a mobile app as an additional channel to users. Just adding a mobile app offering may not increase the sales right away, but it does become a new channel to users using mobile apps.

Note that adding a mobile app may or may not generate revenues in many industries. It is up to the organization to decide if adding a mobile app works well with the overall product strategy and if it can impact long term sales and revenues in a positive way.

Some organizations may even create their own unique channels to support their business. For example, Amazon’s dash buttons are Wi-Fi connected physical devices that allow users to reorder a product from Amazon with one press. Take a look at the video HERE.

Mobile app is a strong touchpoint channel in customer experience

During a customer journey, a user may interact with an organization several times using different channels. Each of these interaction instances represents a touchpoint between the customer and the organization.

Customer touchpoint is the interface of a product or service with users before, during, and after a transaction. Touchpoints go a long way toward defining customer experience and an organization in general.

Consumer habits are changing to a mobile-first lifestyle. Everyone is a fingertip away. Take the example of airline travelers. 1 in 4 airline leisure passengers worldwide is mobile only. "Mobile only" passengers own smartphones and tablets, but not desktops/laptops. Given these insights, mobile app is a critical part of the customer touchpoint.

The users expect an omnichannel experience. Consider a simple traveler journey from flight shopping to the airport: Users search flights on the mobile app, continues flight booking process on the website, receives tickets over email, completes check-in on mobile app, receives boarding passes over email and mobile phone wallet, enquires about baggage allowance over chatbot (linked to the mobile app and/or website), asks specific questions using voice commands on the app, receives notifications about flight on the mobile app, books a taxi to the airport on the app and finally gets to the airport.

The above example is just one type of customer journey. Some users might book flights on the mobile app and perform other interactions on web/chatbot/email/toll free phone lines. The whole idea of plugging in the mobile app into the customer journey is not forceful in this context, rather the need of the hour because users *ARE MOBILE* most of the time.

What about Progressive Web Apps?

There is no denying that progressive web pages/apps, iOS app spotlight, Android app slices and other recent technologies are simplifying the complexities introduced by mobile apps (like download/install/uninstall hassle, offline availability etc). Having said that, one must note that newer technologies do not necessarily pre-empt older innovations all the time. Rather, some new technologies augment the value offered by older innovations and even take them to a higher level of value.

So, What's the Future for Mobile Apps

The future of mobile apps does not lie in adding to the existing trash pile of mobile apps in the market. The future lies in integrating mobile apps seamlessly into the daily lives so pervasively that they no longer need to be used by unlocking the phone, tapping on a few commands and waiting for them to respond. Take a look at this short video summarizing the work of the great David Rose.

The future I believe in does not rely on how many websites, mobile apps, chatbots or phone channels are stitched together to onboard more users and charge them.

The future I believe in makes technology SO HUMANE that we humans do not have to open a laptop to access a website, or unlock a mobile phone to access an app or put your mouth close to a hardware device and make orders.

The future I believe in works so seamlessly that it almost seems HUMAN without challenging me on my intellect, emotions or privacy.

Sadly, today, we have left ourselves far far behind!

Fortunately, we have some humane things happening around us. Stay tuned!

NOTE: I am talking about the future of mobile apps in my upcoming talk, "Enchanting Experiences - The Future of Mobile Apps" at Sydney. If you are in Sydney, then come say Hi at Test Bash Australia 2018. 

Is Sydney too far or too expensive? Take a look at an old version of this talk HERE. 

Top UX Influencers You Need to Know

This article was originally published on Linked In.

If I have seen further than others, it is by standing upon the shoulders of giants.

Thus said, Isaac Newton. Thanks to the Internet, I am constantly learning from the work of many great people across the world. This article is a small attempt to introduce you to few giants in User Experience (UX) space. This list is never complete as there are hundreds of thousands of people who are quietly doing their work.

Twitter is a treasure trove of experts in different fields. I frequent Twitter to learn from the experts on specific topics like UX, read about latest trends and apply them to projects based on the context. Many experts I wrote to, responded graciously and guided me. I am amazed and grateful forever, for the great work done by these great people who have generously shared their experience and expertise for free to make this world a better place for all of us. Aspiring UXers and designers looking for inspiration can learn from these UX influencers with a great legacy behind them. The names are in no particular order.

********************************************************

Donald Norman @jnd1er

www.jnd.org

The founding father of user experience, Donald Norman is credited with coining the term “user experience”. He is one of the world’s most famous UX Designers with @NNgroup. Don Norman’s books are intense, thought-provoking, and showcase his love to create humanizing experiences for users.

Recommended Reading: All of Donald Norman’s books

********************************************************

Luke Wroblewski @lukew

www.lukew.com

Luke Wroblewski is my digital transformation hero. He is a straight-speaking UX guy with a penchant for all things UX in Web and Mobile. His deep work and advice on building next generation mobile apps are close to none other. True to his Twitter bio, he is truly humanizing technology. Luke is a truly hands-on, highly insightful technical subject matter expert of our times.

Recommended Reading: Every article he has ever written!

********************************************************

Jared Spool @jmspool

https://www.uie.com/brainsparks/

Jared Spool is a UX legend and one of the most influential authority on UX design for almost 40 years. His articles, talks, and workshops give you fundamental insights we need to build great experiences. He emphasizes on overall human experiences while building products. Jared’s thought-provoking satire on his experience of flying United Airlines experiences can air drop you into a thinking pool.

Recommended Reading: Every article he has ever written!

********************************************************

Steve Krug @skrug

https://www.sensible.com/

Steve’s best-selling book Don’t Make Me Think was the first book that got me thinking about usability. His books are simple and easy to understand for beginners. His insights on human-computer interactions and user testing are commendable. If you are starting out in usability, this guy’s body of work does wonders for you.

Recommended Reading: Don’t Make Me Think

********************************************************

David Rose @davidrose

https://about.me/davidlrose

David Rose is a world-renowned MIT Media Lab researcher who has built fabulous products with enchanting experiences, as he calls them. The products he has built imbibe subtle human feelings. His products and book are must learn stuff. David is one of the gifted UX artists we have today.

Recommended Reading: Enchanted Objects: Design, Human Desire, and the Internet of Things

********************************************************

Bill Buxton @wasbuxton

http://www.billbuxton.com/

Bill Buxton is a Principal Researcher, Interaction Designer and a relentless advocate for innovation and design. His 2007 book, Sketching User Experiences reflects his love for human values and culture.

Recommended Reading: Sketching User Experiences

********************************************************

Alan Cooper @MrAlanCooper

https://www.cooper.com/

Rightly called the Software Alchemist, Alan Cooper is the ‘Father of Visual Basic,’ and Inventor of design personas. Alan’s books focus on how not to drive users crazy and keep them sane.

Recommended Reading: The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity.

********************************************************

Golden Krishna @goldenkrishna

http://www.nointerface.com

One of the top hands-on designers with a legacy of great UX work at Zappos, Amazon, Samsung, Cooper and now at Google, Golden Krishna is a human-centered designer who is making technology human-friendly.

Recommended Reading: Best Interface is No Interface

********************************************************

I follow many others like Jakob Nielsen, Bruce Tognazzini, Adrian Zumbrunnen, Susan Weinschenk, Karen McGrane, Annette Priest, Laura Klein, Ethan Marcotte, Jess James Garrett and a hundred others. I’ll add their information once I have read their books/blogs and learn more about their body of work.

I use the term Expert for a constant learner, a teacher or a guru. With due credits to all great people who claim to be experts as well as those who don’t think of themselves as experts, we need to understand, there are no EXPERTS on any subject or in any field. Every so called expert builds on the knowledge and experience of their predecessors and contemporaries. Making this world a better place to live is the only thing that matters. And many people do that. I express my heartfelt thanks to everyone who share what they know and help others to become better moment by moment through Twitter, books, blogs, and other online/offline forums. THANK YOU!

Guru devo bhava!

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?

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.

Microinteractions: Designing the Little Details

Last week, I was in Auckland and Wellington, speaking on User Experience (UX) and teaching UX Design courses at two WeTest Conferences in Auckland and Wellington. I also had a rare opportunity to teach/speak at large corporates like Bank of New Zealand and Assurity Consulting. I am blown away by the lovely interactions I had and the new bridge I created with many in New Zealand. 

Token of Thanks

I extend my heartfelt gratitude to Katrina Clokie for inviting me to WeTest Conference. I never ever imagined that a chance meeting with Katrina at CAST 2013, which was my first self-funded trip to a US conference would bring us together again. I would also like to thank the Conference Organizers Katrina Clokie, Aaron Hodder, Shirley Tricker and Daniel Domnavand for conducting a world-class conference, for taking care of the little details for international speakers and introducing me to a super awesome community in New Zealand which is so passionate, warm, curious, learning-focussed and yet humble. This conference and my interactions will truly remain close to my heart for getting the ‘Conference based Microinteractions’ right! 

Teaching UX

It was a fabulous experience to teach UX Courses at the other end of the planet. At the end of these talks/workshops, many people walked up to me and shared many *pain points* in their daily line of work. For example, one of the workshop organisers, Merridy said, “Pari, I am going to put up a board indicating ‘Toilets’ on the door and avoid frustrating our visitors.” One of the conference organisers Shirley mentioned, “The motion detector lamb in our service apartment doesn’t light up instantly and expects a tribal dance which needs to be fixed.” I was thrilled to see people pick up this concept so quickly and apply it at work. 

Ctrl+Alt+Delete

Have you ever wondered why you need ‘Ctrl+Alt+Delete’ to lock/unlock windows? Did you ever wonder why we couldn’t have a single key to do the same task? In my early days of school, I was told to believe that 3 keys were given as a security measure (God knows how this could prevent hackers though!). However, Bill Gates confessed that having three keys was a mistake. “It was a mistake,” Gates admits to an audience left laughing at his honesty. “We could have had a single button, but the guy who did the IBM keyboard design didn’t wanna give us our single button.” David Bradley, an engineer who worked on the original IBM PC, invented the combination which was originally designed to reboot a PC. This brings us to microinteractions. 

Microinteractions

Microinteractions is a concept introduced by Dan Saffer in his acclaimed book, ‘Microinteractions’. By definition,

A microinteraction is a contained product moment that does one task well.

Every time you change a setting, update a device or post a tweet, you are engaging with a microinteraction. They are everywhere and they just need some *noticing*. Microinteractions are so simple that we don’t notice them until something goes wrong. Yet, they are incredibly important in creating delightful experiences for users. 

Structure of a Microinteraction

A beautifully crafted microinteraction contains four main parts: Trigger, Rules, Feedback and Loops & Modes. 

Trigger

A trigger initiates a microinteraction. For example, turning ON a lamp needs someone to press the switch. 

Rules

The rules determine what can happen, what cannot happen and the sequence of events that might happen. 

For example, what should happen when a user presses the switch in a particular direction (Up/Down), is determined by rules defined for this lamp. 

Feedback

Feedback lets people know what’s happening. In his book, ‘The Design of Everyday Things’, Don Norman writes,

“Sending back to the user, information about what action has actually been done, what result has been accomplished is a well-known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback.”

Feedback gives each action an immediate and obvious effect to avoid pain to the user. 

Loops and Modes

Loop is a cycle and mode is a state. Consider ‘Memories’ feature on Facebook. Facebook app constantly loops into your account to check if you have posted something on this day, 1 year, 2 years, 3 years….. X years ago. If the condition turns out to be true, a message pops up to remind you of your memory and your willingness to share your memory. 

If you share the memory, the state of your timeline changes, by showing you a memory in addition to other posts on your timeline. To summarize, loops & modes form the meta-rules of a microinteraction. 

Sketchnote

While there are different components that form a good microinteraction, one should remember that each one must be applied based on the context. Putting a hard rule saying, ‘Every microinteraction has to follow the set guidelines may turn out to be painpoints rather than delightful experiences.’ TEST Yvonne Tse, who works at Assurity Consulting in New Zealand attended my talk on ‘Microinteractions’ at WeTest Conference, Wellington. She created a lovely sketch note that is very close to what I covered in my talk. Take a look. 

Show That You Care!

Users today, have scores of options to choose from. All they want in return for their loyalty is that you care. In the words of Dan Saffer,

What microinteractions have made you happy today?

Labels on Mobile Forms

Labels describe the purpose of form controls, including text fields, check boxes, radio buttons, drop-down menus amongst others. On mobile apps, screen real estate is limited. This forces app developers to save space by placing labels in varying positions on tiny screens. Labels can be placed in many different ways. I cover five varied approaches in this article.

Positioning Labels – The Right Way

1. Inline Labels

Labels placed inside the form field are called Inline Labels. These continue to be a fad for many programmers after Apple introduced them in most of their apps.

Image Source: Dash Lane app

Pros

• Simplistic look
• Space efficiency and better use of mobile real estate

Cons

• Loss of Context – When user begins typing or even upon entering the field, label is lost thereby taking away the memorability aspect of the field

On Dash lane app, text fields have an inline label. Tapping on the text field keeps the inline label intact, until user starts typing into it. If user deletes existing data, inline label re-appears, to remind the user about the context of the field, just in case, user forgot what the field means.

Inline labels suit best on forms with fewer fields. E.g., on login forms, , it’s hard to forget which field is for what kind of input(username, password), for most part as there are just fewer fields with a straightforward goal.

Inline label could be a great feature if it is used in the right way. A good approach is to use it as supporting text or short descriptions that provide cues to users.

Luke Wroblewski, writes simple guidelines for input labels in his book, Mobile First.

A label within an input field:

• Should never become part of someone’s answer. This seems simple enough but still happens quite frequently when things haven’t been loaded or aren’t coded correctly. Ever try searching only to find the word “search” has become part of your query?
• Should not be confused with an actual answer in an input field. If labels and inputs look too similar, people might (rightly) assume an answer has already been provided for them. I’ve seen this happen too often in usability testing.
• Is usually absent when someone starts answering a question and when they finish answering a set of questions. This can make it harder to know which question is being answered or to go back and check answers after the labels are gone.

2. Floating Labels

Image Source: Google Material Design

Material Design guideline, introduced us to floating labels, i.e. the label appears as an Inline Label on the screen (Description field). As soon as user starts typing into the field, the label slowly floats upwards and places itself at the top of the field (Title field).

A downside to this approach is that, unless the features are coded for accessibility, visually impaired users might find it difficult to understand this behavior.

3. Top Aligned Labels

Labels are aligned above input fields, hence the name Top Aligned. I forgot the mobile app from where I picked this screenshot. That leads us to another problem. Shouldn't each screen have app logo on it, just in case, amnesia patients like me could recollect which app we are on? Well, I can only say, the world is tough out there.

Pros

• Faster completion time from users as per Matteo Penzo’s findings
• Works well for long labels
• Labels that require localization might have good flexibility

Cons

• They take up a lot of vertical real estate, leading to perennial vertical scrolling / swiping for long-ish mobile forms

4. Right Aligned Labels

Image Source: www.css-tricks.com

Labels are right-aligned while input fields follow them in left-alignment.

Pros

• Slightly slower completion times compared to top aligned labels
• Less vertical space

Cons

• When labels change, this alignment leads to flexibility issues in the layout

5. Left Aligned Labels

Image Source: www.css-tricks.com

Labels are left-aligned while input fields follow them in left-alignment.

Pros

• Best suited for forms where users need to slow down and scan the fields. For e.g., bank forms

Cons

• Slowest completion time compared to top aligned and right aligned labels
• Difficult to parse fields on long forms

Luke Wroblewski, has talked about top, right and left aligned labels in an elegant way, here that is almost impossible for me to beat. 

Image Source: Polar mobile app

As you notice in Polar mobile app above, inline labels can be used as placeholder texts inside input fields to complement labels with additional information. Notice that Polar has ensured that branding is intact on login screens with their 'Join Polar' title. There is little possibility that a user forgets which app this is. By the way, Polar app was designed by Luke Wroblewski, which was acquired by Google a while ago.

Labels appear to be the least important elements on mobile screens, yet play a major role in how these screens appear to users. We need to pay attention to not just their behavior, but also their placement.

How do you handle labels in your apps?