Yes, what you heard is right. Medium.com no longer offers the option to put text over a title image. What you see here is a Photoshopped title image. Aha!

Text Fields in Mobile Phone Apps

All my recent assignments were app designs for banking and insurance sectors. Forms are a regular feature of these apps. I studied the existing form fields in mobile apps and noticed some interesting implementations of text fields.

Keep in mind that this is not an exhaustive list. Android Material Design Guideline has a very detailed section on Text Fields.

Text Box — Single Line

‘Sign in’ screen from LinkedIn app. ‘Label inline the value field’ animates to ‘label above the value field’ when the text box is in focus.

• Initially, the label is displayed inline on the value field.
• When the text box is in focus, the label animates to a smaller sized font and floats above the value field.

Text Box — Multiline

‘Add Note’ from Google Calendar app. Single line field expands to multi-line field.

• This element is similar in appearance to ‘Text box — single line.’
• As soon as the text overflows, the field expands to accommodate the next line.

Password

‘Sign in’ screen from LinkedIn app. ‘Show/Hide’ toggle option on the right end.

• As soon as the first character of the password is entered, a ‘Show’ option appears on the right end.
• Some people use ‘eye open/close’ icons to represent ‘show/hide.’

Location

‘Set Location’ from Foodpanda app. It supports manual entry as well as ‘Use my current location’ GPS feature.

• Based on the text entry on this field, suggested locations are shown as a list. On selecting one of them, the field gets filled.
• There is a ‘Use my current location’ icon on the right end. Tapping on this will auto populate the field by bringing the current location from GPS.

Search

‘Search’ from Airbnb app. ‘Voice Search’ icon on the right end.

• Search page opens up when we tap on a search icon. So, an ‘up arrow’ (‘back button’) will be displayed on the left end.
• Additional search option is shown as an icon on the right end.
• Based on the text entry on this field, suggested search strings are shown as a list. A form reset (X) icon appears on the right end.

Airbnb app shows ‘Voice Search’ icon on the right end. Ebay app shows one more icon of ‘Barcode scan’ beside ‘Voice Search.’

The following ‘additional search’ implementation by Flipkart app is the best — easily tappable Voice/Barcode/Image Search icons placed on a separate bar, beneath the search field.

‘Search’ from Flipkart app. Easily tappable Voice/Barcode/Image Search icons on a separate bar.

Phone Number

‘Mobile Number Confirmation’ from OYO Rooms app. A tap on the Indian Flag brings out the ISD codes of all countries.

• The home country code is represented by a miniature national flag.
• Tapping on the flag icon opens up a modal view with the complete list of ISD country codes.
• When a new country is selected, we get to see the prefix code. This time there is no thumbnail view of the flag.

Merging Interactions

iOS and Android are on a path of merging their interaction designs rather than differentiating the operating system on interactions.

Proof? Very recently, Google added ‘Bottom Navigation’ in Android Design Guideline. It is the same as the iOS Tab Bar that we all are familiar with.

This unification in interaction will create less confusion to typical users like me who use a Nexus phone, an iPad, a Windows 10 laptop and a MacBook Pro — all at the same time. I have the Evernote app installed in all of them. In my opinion, the experience of the app should be the same irrespective of devices and operating systems. So, we don’t have to remember the unique app interactions required in each operating system to get something done.

Lower cognitive load, lower stress!

Enjoyed this article? Spread the joy to others by sharing and recommending!
Also, head to www.antzFxWay.com for more design and photography stuff.

Title image courtesy: Pixabay.com