08 June, 2017

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
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
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
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
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
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
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
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
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!

22 May, 2017

How to Improve Payment Forms Using Four Interaction Design Patterns on Mobile Devices

This article was originally published on Linked In.




Payment forms are critical on mobile apps, to sell products online. Conventional payment forms have at least 4 input controls — Name on Card, Card Number, Expiry Date, CVV and in some cases, even Card Type — Visa, Mastercard, American Express and so forth. We seek card type although we can detect which type of card it is using first two digits of the card number. We seek detail to this level in the name of providing freedom and control to users.




Typing through each field, by looking intermittently at the card and the payment form to ensure correctness can be a daunting task. Payment form listed above can be simplified by reducing the number of input controls from 4 to 1.




Great! It’s a given that this single input control gathers all the information previously done but in a more elegant and simplified way.

Interaction Design Patterns
Good experience only begins from here — the single input control. Four intuitive interaction design patterns can be used to improve the input experience further.

1. Contextual Keypad
Tapping on the card number field displays a keypad. A lot of mobile apps display qwerty type keypad. The user has to switch to the numeric keypad with few taps to enter the card number.




Reducing the effort required to switch between multiple keypads while entering input is a big relief to users. Displaying a numeric keypad (input type=tel) since.

2. Input Masks
As a user types the card number, after typing first 4 digits, he/she pauses to decide whether to give space or hyphen symbol. The user needs intuitive guidance here on which separators (space/hyphen) to use and how many digits are remaining.




Input mask is the answer. Input mask can be implemented in many ways:
  • Use ‘XXXX-XXXX-XXXX-XXXX’ and gradually reveal the input structure as user types along
  • Use real text like ‘Expiry Date’, ‘CVV’ to hint users
  • Auto-populate card logo based on card number as user types first two digits of the card number. This provides feedback to the user that he/she has indeed, entered the right card number.
3. Animation
An improved design pattern for payment forms is to introduce animation using card metaphor by designing a virtual card layout. As a user enters the data, it is auto-populated on the card to give a real card visual experience.




4. Machine Input
Tired of typing input manually? There is a simpler pattern :). The built-in camera on mobile phones can be used to retrieve card information by just scanning the card.




The user doesn’t need to enter card number manually anymore. Many mobile apps are adopting this approach these days [This approach might need intense machine learning algorithms to work with precision.]

Using small/big fingers on small screens to perform input operations can be challenging for many users. Payment forms are particularly risky given the secure nature of operations. Intuitive interaction design patterns listed above can soothe stressed out users by simplifying payment forms to a large extent.
How simple are the forms in your apps?

09 May, 2017

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?


19 April, 2017

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?


10 April, 2017

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?

02 March, 2017

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