Categories
microsoft windows OS

Learning Resources In Challenging Times: Online Workshops, Meetups And Events

In these existing unusual times of seclusion and social distancing (with nearly all conferences and occasions being cancelled), it can be rather challenging to feel linked to household, pals and associates. Here at Smashing, our company believe that is now more vital than ever to remain in touch and assistance each other. Behind the scenes, the group is working relentlessly on methods to keep the neighborhood linked, and oh boy do we have a great deal of things in shop for you! You didn’’ t truly believe we ’d quit that quickly, did you?

Your office might look a lot like Topple’’ s, however even if it isn ’ t, make yourself comfy! We ’ ll assistance you improve your abilities online and find out useful, actionable insights from specialists inthe market.

We ’ ve been hectic over the last couple of weeks, and we’’ re not stopping! We have online workshops , SmashingConf Live , Smashing Meets and finally, Smashing TELEVISION coming right within your reaches! Initially, let’’ s see what else we ’ ve been upto …

. Look What ’ s Cookin ’!

Exciting times! Click! , our newest Smashing book, is readily available for pre-order with a friendly discount rate– you can currently begin checking out the eBook till your printed copy comes to your doorstep. Composed by Paul Boag and wonderfully created by Veerle Pieters, the book is divided into 11 chapters: from checking out the psychology of choice making and how to determine conversion to checking out methods of how to motivate users to act without alienating them.

. There is no scarcity of books on marketing and UX, however when it pertains to bridging the space in between the 2, a lot of us have a hard time to discover the ideal balance. Pre-order today → .

Of course, if you ’ re sensation smashing today, we ’dlike to welcome you’ sign up with the Smashing household and get the eBook totally free( amongst with lots of other eBooks and a couple of elegant felines!).

. Knowing And Networking, The Smashing Way.

Despite the existing scenarios, we ’ reeager to discover methods which we can use Smashing experiences to anybody thinking about gaining from professionals in our market– without requiring to leave your desk! We ’ ve been asking what kind of resources you ’d like to have, therefore all of’the following online occasions is what has actually landed’in our Smashing wanting well. Thank you to everybody who has actually shared their ideas and feedback– we ’ ve been all ears!

. 1. Online Workshops( May– July).

 Topple the Cat prepared for the brand-new experience Our friendly online front-end/UX workshops are bound to increase your abilities and assist you get useful, actionable insights from professionals in the market– live. There will be a lot of informative takeaways, workouts, slides, recordings and friendly Q&A time. Obviously, we ’ re delighted to supply discount rates for big groups and trainees.

.

We currently have you covered for the next 3 months– make certain to conserve your area as quickly as you can:

.When? What? Who? May 7– 22. Advanced CSS/Sass . Miriam Suzanne. May 12– 26. Smart Interface Design Patterns .Vitaly–Friedman. May 28– June 12. Web Performance Masterclass –.Harry Roberts. June 11– 12. The CSS LayoutMasterclass . Rachel Andrew. June 16– 30. Front-End AccessibilityMasterclass . Marcy Sutton. June 18– 26. Building Modern HTML Emails –.Rémi Parmentier. July 2– 17. Buy!The eCommerce UX Workshop . Vitaly Friedman. July 7– 21. Design Systems .Brad Frost.

Note: If you ’ re likewise thinking about how you too can run online workshops, listen to Smashing Podcast episode 14 with Rachel Andrew in which she discusses running online workshops and how a standard occasion can adjust when individuals can ’ t go to face to face.

. 2. SmashingConf Live( June 9– 10).

 Topple the Cat resting on a comfy sofa with a laptop computer on its lap Meet SmashingConf Live( June 9– 10), a genuinely smashing, friendly online conference on front-end &UX. With interactive live sessions, useful insights, available speakers, collective notes–and fireplace talks with similar folks. Dive to initially validated speakers. Check schedule →

.

Both days begin at 8 AM PDT( inspect your time ), with interactive sessions, followed up with →a time for Q&A s and conversation zones.

.

Ah, and the very best bit: a conference in which you play an active function– participating in live sessions, Q&A s, conversation zones and obstacles. To the schedule. Of course that ’ s not all! Be gotten ready for style &coding obstacles, scavenger hunt and fireplace sessions with secret visitors. And to keep in design, obviously we ’ ll toss a Smashing Party.

Do you like what you see, however are fretted about getting a long time off from work? Well, you undoubtedly didn ’ t believe we’would leave your hanging? We understand how tough it can often be, therefore we ’ ve prepared a cool lil ’ Convince-Your-Boss design template to assist you out. All the best!

. 3. Smashing Meets (Free).  Topple sitting beside a campfire We ’ re very thrilled to run our extremely first Smashing meetup next week! We will concentrate on front-end and UX, however likewise cover all sorts of subjects from efficiency to availability. Smashing Meets wouldn ’ t be possible without some fantastic neighborhoods from around the globe, so another Thank You to everybody included!

. 4. Smashing TELEVISION( Free Webinar on May 19th).  Photo of Carie Fisher and Harris Schneiderman Looking for methods to assist you broaden your ease of access test protection beyond automation? With really little resources, you can make a significant distinction. Join us with Carie Fisher and Harris Schneiderman at 7:00 PM CET/1:00 PM EDT who will show the fundamentals of automated screening and share essential lessons on optimizing your ease of access effect.

. Sharing Personal Experiences And Stories.

 Smashing Podcast moderated by Drew McLellan We ’ re moving onto our 16th episode of the Smashing Podcast next week! The Smashing Podcast is the best method to take a bit of Smashing in addition to you on your early morning strolls, while cleaning the meals, or anytime you like actually. You can subscribe in your preferred app to get brand-new episodes as quickly as they ’ re all set.

. Previous Smashing Podcast episodes ( consisting of records). Follow @SmashingPod on Twitter. Your Design Work Deserves Attention.

Do you have art work you ’d love to show the style neighborhood? Please do if so! We are constantly trying to find imaginative skill, so if you have a concept for a wallpaper style, please put on ’ t be reluctant to send it. Join in! →

. Trending Topics On Smashing Magazine.

We release a brand-new post every day on different subjects that are existing in the web market. Here are some that our readers appeared to take pleasure in the most and have actually advised even more:

. “ Setting TypeScript For ModernReact Projects Using Webpack And Babel ” by Blessing KrofeghaThis short article presents Typescript, a superscript of JavaScript that provides the fixed type function for finding typical mistakes as“designers codes, which improves efficiency, for this reason leads to robust business applications. You ’ ll likewise find out how to effectively establish TypeScript in a React Project as we construct a Money Heist Episode Picker App, checking out TypeScript, React hooks such as useReducer, useContext and Reach Router. “ A Complete Guide To Mechanical Keyboards ” by Ben FrainHow much idea have you take into your main input gadget? Ever thought about just how much better your user interface with your computer system might be? In this post, we dive into the possibilities of mechanical keyboards.“The various designs, switch types and even keycap product. Strap yourself in– this will be a deep dive! “ Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols ” by Thomas BohmFor centuries, we have actually been utilizing white area in typography. Today, in 2020, how do we include spacing to punctuation marks and other signs, and — how do we change the area on the“left and ideal side in a constant and simple method? It is really not as fast and simple as it need to be. “ How To Pass”Data Between Components In Vue.js ” by Matt MaribojocWith many various methods to share information throughout parts, you need to understand which strategy is best for your circumstance. Let ’ s examine 3 of the most typical methods to pass information in VueJS. “ Reducing Design Risk ” by Eric OliveThe pressure to hurry market and use research study brings threat. We ’ ll deal 4 useful strategies to reduce this danger and produce styles that much better serve consumers and the business: context over benefit, compromise, much better style choices, style decrease. Finest Picks From Our Newsletter.

We ’ ll be truthful: Every 2nd week, we deal with keeping the Smashing Newsletter concerns at a moderate length– there are so lots of skilled folks out there dealing with fantastic jobs! Congratulations to everybody included!

Interested in sponsoring? Feeltotally free to have a look at our collaboration alternatives and contact us with the group anytime– they ’ ll make certain to return to you immediately.

.

P.S. A big thank you to Cosima Mielke for composing and preparing these posts!

. Developing Accessible Color Palettes.

Findingtising@smashingmagazine.comthe ideal tint or shade of a color is not — just’a matter of taste however likewise ease of access. , if color contrast is lackingDoing not have a product item, in the worst case, even become end up being for people individuals vision impairmentsProblems An extremely in-depth contrast checker to assist you find prospective mistakes ahead of time originates from Gianluca Gini: Geenes .

 Geenes

The tool lets you play with shade varieties and saturation and use the color combinations to among 3 selectable UI mockups. As soon as used, you can set offvarious type of vision problems to see how afflicted individuals see the colors and, lastly, make a notified choice on the very best tones for your combination. To utilize the colors right now, simply copy and paste their code or export them to Sketch.

. Command Line Love.

It ’ s not unusual for technical paperwork to be dry and feel challenging, particularly for individuals who are simply beginning with a brand-new tool. That can get rather discouraging specifically when a handbook is challenging to follow or check out, or the descriptions are verbose and do not have examples.

.  Dash Dash

Dash takes the Unix( Linux, BSD, macOS) open source manual pages and sets the material in a lovely type and design. It offers not just descriptions of all commands, however likewise search, examples and TL; DR areas. The Art of Command Line takes you on a journey to Command Line from fundamentals to system debugging.

.

And if you are up for sophisticated command line methods, cmdchallenge triggers you to fix jobs with a single line of celebration. (vf )

. Available Component Libraries.

While a number of the element libraries we develop are attempting to cover all the normal suspects( the accordions, the tables, the carousels, the drop-downs, in addition to typography, colors and box shadows ), No Style Design System by Adam Silver is focused mainly around ease of access and web kinds.

.  Accessible Component Libraries

As a system produced for and utilized in his book on Form Design Patterns , Adam ’ s library offers a set of available elements for whatever from autocomplete, checkboxes and password expose to radios, choose boxes and steppers. The majority of them have a very little CSS styling with tidy, available markup. And if you require somewhat advanced parts, Heydon Pickering ’ s Inclusive Components has actually got your back: with extensive tutorials on available cards, information tables, notices, sliders, tabbed inerfaces, toggles, menus and tooltips.( vf)

. Custom-made CSS Cascades.

Miriam Suzanne constructed a demonstration to highlight a extremely smart method to specify a waterfall of custom-made residential or commercial properties . One that enables you to figure out which intent needs to take top priority, without fretting about the uniqueness of how the worth is specified.

.

See the Pen [Custom-made Cascades]( https://codepen.io/smashingmag/pen/JjYawPP )by Miriam Suzanne .

. See the Pen Custom Cascades by Miriam Suzanne .

Miriam demonstrates how it operates at the example of a button. Due to how the waterfall is set up, the default button is constantly falling back to– btn-bg– default. Including thehandicapped quality, constantly bypasses any other button colors, no matter where they are specified, and, when brand-new button types are produced,– btn-bg– type makes sure that just the defaults are bypassed however not the state. The technique likewise lets you set these worths contextually. A wise service to prevent the normal threats that highly-specified inline designs generally bring along.

. Front-End Bookmarks.

Some of us conserveall the beneficial short articles and talks they discover in one ever-growing bookmark folder (which can make discovering what you ’ re searching for rather a difficulty sometimes), others have a more orderly technique. Like Manuel Matuzovi ć.

.  Front-End Bookmarks

Manuel gathers posts and speak about HTML, CSS, and JavaScript on his website Front-End Bookmarks , organized alphabetically by aspects, characteristics, homes, expressions, techniques, and selectors. No matter if you ’ re searching for info on how to properly utilize aria-labelledby or what the:: marker pseudo-elementćis everything about, opportunities are great that Manuel currently assembled handy resources on the subject. By the method, if you feel that a resource is missing out on in the collection, put on ’ t be reluctant to add to it on GitHub .

. GitHub Tips And Tricks.

Do you understand how to immediately squash devotes on GitHub when combining pull demands? Or how to open a repo in the internet browser utilizing GitHub CLI? If not, Joe Previte ’ s collection of GitHub techniques and suggestions may be for you.

.  GitHub Tips And Tricks

In bite-sized videos, Joe shares effective however little ideas to take your GitHub workflow to the next level. And for those of you who choose to discover by reading, a lot of pointers are likewise offered as brief post. Convenient little timesavers.

. The Sound Of Colleagues.

Working from’house can have some genuine benefits over working from a workplace, however let ’ s be sincere, it can be a rather lonesome experience, too, when there are nocoworkers around. If you feel your office is getting too peaceful and you require some bustle in the background to remain focused, The Sound of Colleagues has actually got your back.

.  The Sound Of Colleagues

The Sound of Colleagues lets you blend workplace soundsto produce your custom-made workplaceambient sound. Individuals typing and talking, phones calling, the coffee device, the printer– all of these little things amount to bring a little workplace sensation to your house. Possibly it ’ ll even assist you improve your efficiency, who understands?

. A Minimalist And Modern Media Player Library.

If you wish to embed a media gamer on your website, Vime may be worth taking a more detailedtake a look at. Constructed around the concept that you manage the gamer, not the other method around, the open-source library supplies an alternative to Videojs and Plyr and supports HTML5, HLS, Dash, YouTube, Vimeo, and Dailymotion.

.  Vime

Vime does not — just shine with a minimalist, smooth appearance, however it is responsive, available, modular, and light-weight, too. It manages with no external reliances and comesin various plans customized to various requirementsso that you can choose simply what ’ s needed for your usage case. And considering that minimalist doesn ’ t suggest dull, Vime is supported by a plugin system that uses a great deal of space for modification– believe customized controls, settings, tooltips, and more. The last 2 variations of all contemporary web browsers in addition to IE11 are supported.

With Smashing Newsletter, it constantly seems like house. A feline with slippers checking out the newsletter edition. . Smashing Newsletter.

Every 2nd Tuesday, we send out a newsletter with helpful methods on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.

. Your( smashing) e-mail. Subscribe →. UX, style and front-end. Sent 2 × a month. You can constantlyunsubscribe with simply one click.  Smashing Editorial( cm, vf, ra).

Read more: smashingmagazine.com

Categories
microsoft windows OS

Welcome to the Future of Work

The future of work was expected to be something that was constantly coming however never ever got here. Idea professionals and leaders would speak about the ‘‘ future of work – ’ as an idea– absolutely nothing more than a gadget to assist us much better prepare to jump into the next chapter of our life and organisation. And yet in March of 2020, with what appears like little caution, the future of work got here, right away altering the video game for millions over night. With self-isolation and physical distancing standards setup throughout America and all over the world, workplace doors have actually been locked, and the 2017 video of the BBC father whose child notoriously marched into the frame is now more relatable than ever.

Well, we’’ ve lastly handled to shave a long time off the early morning commute, which now includes strolling from our cooking area to the when ignored extra bedroom/storage closet/home workplace. With diversions are plentiful, be it kids, household, or your attention-seeking dachshund, we’’ ve all needed to change. Apptopia reported that Zoom now has 15.3 million day-to-day users (about two times the population of LA, NYC, Boston, San Francisco, Dallas and Phoenix, integrated). This almost quintuples the variety of users on the platform this time in 2015. Video chat is increasing and in-person connection falling off a high cliff, like Mufasa in Lion King.

Here’’ s what the last couple of weeks have actually taught us about the office of tomorrow:

.1. Work is determined by outcomes, not time.

Gone are the days of the 9 to 5 work environment. Consider the single mommy that is dressing, feeding, and arranging her kids, while attempting to look after herself and her work. Among her kids isn’’ t getting the mathematics idea and she has actually simply leapt in to assist. The soup on the range is boiling over and she’’ s no place near the computer system at 11:30 AM. After a busy day, she’’ s got the kids to bed and the last load of laundry in prior to heading back to the computer system to complete the report prior to the virtual conference tomorrow early morning. It didn’’ t matter whether the work got done at 2:00 PM or 10:00 PM, it simply mattered that it got done, and was succeeded.

 future of work

.2. Construct trust by keeping track of development.

If a worker is dealing with a report in self-isolation and no one is around to witness it, did it even take place? Yes, much like the tree in the forest it made a noise and you simply missed it. With a great deal of working experts now required to be working from house, routine group gathers and check-in calls can assist leaders track development and more notably assist staff members feel acknowledged and valued. No one likes a helicopter supervisor, however when it concerns keeping a remote group empowered keep in mind the 3 A’’ s: Be conscious, friendly and readily available. Without these, it’’ s hard to track tasks and preserve relationships. In order to continue developing trust, concentrate on tracking development. The work environment of tomorrow will see remote work as a typical practice, not an exception, and will have the ability to keep track of development and develop trust as an outcome.

.3. Work life combination will be much more popular.

Are they using trousers? We’’d like to believe so however can’’ t be’too sure. What we ’ re recognizing is that individuals are individuals and the concept of excellence is gone. Excellent riddance. The previous weeks have actually required us to take our masks of excellence off. Without time to get ready for the shift from workplace to house, we’’ ve all seen untidy houses and houses, kids running around in the background, unidentifiable sounds that are forgiving however annoying, and the odd stain on a t-shirt. The forgivingness we’’ re seeing today will assist form the work environment of tomorrow and permit individuals to do their finest when they can, nevertheless they can. Work and life will be even more combined due to the fact that of this. On our group calls, we’’ ll be presented to animals, kids, and loved ones bringing a lot more humankind to the brand-new workplace. This much better understanding of each other’’ s lives will end up being a structure for even much better compassion and neighborhood being constructed in the future as we won’’ t simply be the specialists we are; we’’ ll be a member of a household, owner of a family pet, and a human.

 how to keep remote staff members engaged

.4. Virtual conferences and conferences will increase.

Finally, we’’ ll see that since more individuals have the ability to work from another location, flexibly, and by themselves time, that virtual occasions and connection with individuals will be valued more than we’’ ve seen prior to. We’’ ll see a range of smaller sized virtual group occasions, interdepartmental conferences, and market expos contributed to calendars. This development in the virtual occasions sector will enable individuals the chance to link and connect with individuals they ’ ve been dealing with regularly, share finest practices, and reinforce relationships. These virtual occasions will be partly academic, however mainly a chance to commemorate, link, and share.

.

If there is something we ’ ve gained from the previous couple of weeks, it is’that these unmatched times have actually accelerated what we believed the future of work was going to appear like. We ’ ve found out that we can rely on individuals, that they can get their’work done from anywhere, which in-person connection and neighborhood is yearned for. If something is clear, it ’ s that we ’ re well on our method to a more lively, inclusive’and linked office culture.

.

To find out more about my ideas on the future of work, take a look at my webinar recording, “ The Evolution of Connection and Need for Belonging . ”

.

Read more: feedproxy.google.com

Categories
microsoft windows OS

How To Design Mobile Apps For One-Hand Usage

How To Design Mobile Apps For One-Hand Usage

How To Design Mobile Apps For One-Hand Usage

Maitrik Kataria

2020-02-20T11:00:00+00:00
2020-02-20T12:07:18+00:00

On Friday, January 2007 the world shrank into our palms as three revolutionary products — the iPod, a phone, and a breakthrough internet communicator — were unified to create the smartphones we know and love today.

Steve Jobs on One-Handed UX

The first iPhone introduced in 2007 marked the fall of Qwerty keypad and stylus. (Large preview)

iPhone was built to be comfortably used for one-handed operation, allowing for a smoother thumb movement across the screen.


Steve Jobs once said that the 3.5-inch screen is the “perfect size for consumers” and that larger screens are foolish.

Smartphone Shipments Worldwide by Screen Size from 2015 to 2021

(Large preview)

But it wasn’t until the turn of the last decade that phablets gained popularity owing to their bigger screens, so much so that less than 1% devices sold today had smaller than 4-inch screens.


90% of the smartphones sold today have bigger than 5-inch displays.

In the meantime, this goldrush for bigger-the-better presented app makers and designers with opportunities to utilize the screen real estate to serve more content and functions.

For instance, the CNN App was among the few who got early access to iPhone 5 introduced in 2012. The developers not only gave it an aesthetic transformation but also designed a reader-friendly, visually-appealing experience that made headlines stand out.

Evolution of Thumb Zone in UX UI Design

Adapted from Phil Schiller’s keynote at Apple’s Special Event 2012. (Large preview)

With Bigger Screens, The Ease Of Access And Reachability Suffer

While bigger screens are great for showing more content, the #1 design consideration of Steve Jobs for making 3.5-inch phones suffers — designing for one-handed usage.

In his 2-month-long research — at airports, streets, cafes, on buses and trains — Steven Hoober shed light on the three ways users hold their phones.

How People Hold and Interact with Mobile Phones

(Large preview)


49% of users hold their phones with one-hand specifically while they are on the go.

Making a strong case for designing apps for one-handed usage. Steven also found that users frequently alter their grip based on their comfort and situation.

Why Designing For One-Handed Usage Should Become The Top Priority For App Makers

We use our phones a great deal when we are preoccupied or in a hurry. This greatly impacts how users hold their phones and how they use the apps resulting in a lot more of one-handed-usage than the 49% number suggested above.

Research suggests that an average user checks their phones for as many as 58 times a day out of which 70% of mobile interaction lasts less than 2 minutes.


We use our phones in “distracted short-burst usage”.

Image Credit: Rescue Time. (Large preview)

A team of researchers at Simform observed usage and behavior of short-burst sporadic usage in multiple scenarios such as:

When Users Use Mobile Apps

Example cases of short-burst usage (Large preview)

Google’s Product Director, Luke Wrobleski, terms these short bursts as ‘one thumb, one eyeball’ mobile-usage experience. It reflects how a distracting environment forces users to engage in single-handed usage within short spans of partial attention. He further adds that the most optimal type of smartphone usage with a single hand is one where quick interaction is supported by smooth functionality.

How To Design For Keeping These One-Handed Short-Burst Usages In Mind?

The answer is rather simple. Do continuous usability testing and study different ways your users hold their phones in various situations.

If the users of your app tend to use the app a lot in distracting scenarios, then you should focus on designing patterns that target reachability and one-handed use.

Two Methods of Holding a Touchscreen Phone with One Hand

(Large preview)

Let’s take a look at the evolution of Spotify’s interface to get a perspective of the problem:

Thumb Zone for Mobile Hamburger Menu UI

Spotify’s Old Navigation — Hamburger Menu. (Large preview)

Spotify used the Hamburger Menu at the top-left which concealed these features and set the users on a treasure hunt of sorts. With the advent of bigger screens, however, another design challenge was added to the list — reachability.

Thumb Zone for Mobile Hamburger Menu UI

Spotify — A certain level of difficulty and discomfort was experienced as users tried to communicate with the app. (Large preview)

This compelled Spotify’s team to pull down the Hamburger Menu in 2016 and lay its core features — Home, Browse, Search, Radio, and Library — at the bottom that resulted in an increase of 9% clicks in general and 30% on menu items.

Use Established UX Patterns For Common App Usage Scenarios To Make One-Handed Usage Easy

Why reinvent the wheel? When you can use proven UX patterns that work. Many designers have already focused on one-handed usage as their designing principle.

We have gone through hundreds of apps and thousands of patterns to find the best patterns one-handed usage in mind. So let’s look at what works, what problems are solved, and what benefits you will get out of these.

We divide the most common user behaviors and UX patterns in six categories:

Navigation UX Patternse.g. menu bars, tab bars, and, gestures for easily moving between the most important sections of the app;
Designing For ActionsCreating, editing, posting, adding, removing, and other actions users take to utilize the core functionality of the app;
Shopping, Transactional And Checkout Flow Design Patterns
Searching, Sorting, And Filtering Patterns for when users want to quickly find or browse content;
Input And Interaction PatternsSliders, pickers, selectors, dropdowns, form fills, zooming, scrolling that make up the building blocks of any app;
Miscellaneous PatternsMedia playback, photo capture, photo editing, and map navigational patterns.

1. Designing App Navigation Keeping ‘One-Handed Usage’ In Mind

What Is It?

The foundation of a great app is a good navigation design. Good navigation helps users discover the features faster and find what’s important to them.

70% of users discover features of the app using navigation links compared to search or other ways. Navigation bars, menus, gestures, links, tabs, etc are the most common navigation UX patterns.

A good navigation design should have all the important sections right upfront and easily accessible.

Challenges

Common UX patterns like Apple’s tab bar and Google’s swipeable menu have limitations. You can put only a limited number of features in the tab bar and to access all of the swipeable menu items is not easy.

Users shouldn’t have to struggle to reach an important part of the app by stretching to the top of the screen. That’s just bad usability. Specifically, if the users are on-the-go and are using the app in a short burst.

Solution

Facebook and many other apps solve this challenge by putting items in a tab icon called More or Menu from where users can access more features and sections of the app. This, however, is not ideal for reachability and one-handed use.

Use the flyout menu instead of a full-page menu for reachability and fitting in more than 5 items.
Expanded tab bar for when you have more content.
Personalized tab bar for power users to quickly access what they like.
Use gestures to imbibe ease-of-access in users’ habits.
Getting back and closing a page should be easy as well.
Quickly jumping to a section of the page with smart UX patterns

Facebook, for instance, conceals numerous features in a Hamburger Menu that declutters the main screen. Although this inclusion has a cleaner and more organized appeal, users suffer from one-handed reachability.

1.1 What makes the Hamburger Menu a REAL Problem?

Use Flyout Menu Instead Of A Full-Page Menu For Reachability

Thankfully, we have a way to resolve this challenge —

Full-page menus can be replaced with flyout menus, which like the name suggests ‘fly-out’ from the bottom. This allows for easier access to the options even with one hand.

1.2 Mobile UX Patterns for Flyout Menu Designs (Video Credit: Joox)

Expand The Tab Bar For When You Have More Content

Human Interface Guidelines recommend having no more than 5 features in the bottom navigation bar. This makes it tricky for app builders to present additional core functionalities at the forefront.

This is where the ‘More’ option (3 dots) comes in handy. Located at the bottom bar, it can conceal other functionalities and reveal them with a click.

1.3 Designing Bottom Navigation Bar with Expandable More Options.

Personalized Tab Bar For Power Users To Quickly Access What They Like

Every user is different and a feature that is important for one user may not be that important for the other. To make the most of your app, you can allow users to customize their tab bars with frequently used functionalities.

1.4 Personalized Bottom Tab Bar for Quick Feature-Accessibility.

Gestures Are Easy To Imbibe In Users’ Habits For Quick Navigation

Popularised by Tinder, Gesture-based navigation is a great technique to facilitate single-handed usage. Gestures if smartly used can help expand navigation for one-handed use.

1.5 Gesture-based Navigation to Access App Features.

From Designing “Getting To” To “Getting Back” Using Gestures And Accessibility

Navigation isn’t only about getting to a screen or section of the app. It is important to design for — going back to where the user came from, closing a screen, or jumping to a section on a page! Let’s look at how apps use gestures and UX patterns to do those things easily.

1.6 Using Gestures to Navigate Through Multiple Screens (Video Credit: Zenly)

Patterns For Quickly Jumping To Different Sections Of The App

Apps with many categories, subcategories, and sections such as books, wiki, restaurant menus, products may need more organization to ensure users don’t struggle with finding content.

These can be organized in a hierarchy and using UX patterns to increase accessibility and ease of use.

1.7 Floating Tab Bars and Gestures to Jump Between Sections.

2. One-Handed Patterns For Core Actions Like — Creating, Editing, Posting, Adding, Deleting And Others

What Is It?

Users spend about 50% of their mobile phone time in self-expression, social interaction, online shopping, managing finances, health and productivity, and planning upcoming events. These action-driven UX patterns include things like creating social posts, editing documents, editing, a few others.

Challenges

When designing action-driven apps, we have to ensure they don’t take the backseat. Like, having a post or creating a button at the top instead of right next to your thumb.

Solution

There are three things to keep in mind when designing the user experience of these core actions.

Core actions should grab users’ attention by the prominent placement of the icon or button. Don’t put them at the top right corner of the app where they can get buried. It should be easily reachable without needing to use second hand or overreaching.
On top of that, users should be able to finish the entire creation and addition task flow with one hand. This includes things like canceling the task, typing with keyboard opening up, moving to the next step and so on.
Designing for complex editing tasks with multi-level edit menus and controls.
With reachability as a goal, you can make sharing and sending things easy and simple too.

The Button Or Icon For The Core Task Of The App Should Draw Users In

Apps’ core tasks center around things like capturing images, creating a post, adding files, sharing, etc. It becomes necessary to have users focus on these first and make it — reachable and discoverable.

For instance, Snapchat hides everything and only incentivizes users to capture photos and videos. Also, the ‘Send’ button immediately asks users to share their stories with others.

2.1 Making Core Tasks Easily Reachable with Gestures, Flyout Menus, and Floating Tab Bars.

Breaking Up Complex Editing Tasks With Menus And Controls Designed Specifically For Mobile

For many users, mobile phones are the most used computing devices. There is a generation of users who get real work done on their mobile phones. For example, document editing is no longer a computer-only affair since a host of mobile apps offer the service.

Microsoft Word and WPS Office offer a host of editing tools and multi-level menus within thumb’s reach. These intuitive menu systems are smart and powerful allowing users to do complex operations and multiple choices.

2.2 Placing Editing Tools on the Bottom Half of the Screen for Quicker Modifications.

With Reachability As A Goal, You Can Make Sharing And Sending Things Easy And Simple Too

What amplifies our experience with our favorite music these days is the super-quick shareability options for social media, often just a click away.

You can employ a share extension that slides up from the bottom and allows users to directly type messages.

2.3 UX Patterns for Single-handed Sharing of Photos, Videos, Music, and More.

Divide Creating Or Adding Tasks Into Multiple Steps

Creating boards, favorites, and wish lists can be a drag, especially when they are placed at the top extremes. Let’s look at the patterns that handle multi-step data inputs.

Flipboard and Airbnb keep everything at the bottom and within the reach of the thumb. From typing to selecting the next steps or canceling the action is very simple.

2.4 Placing ‘Create’ and ‘Add’ Icons within the Reach of the Thumb for Smooth One-handed Usage.

3. Designing Faster Checkout And Transactional Experiences For When You Are On-The-Go

What Is It?

According to Kaspersky Cybersecurity Index, 50% of eCommerce sales happen on mobile phones. Add to that commercial transaction like booking a ride, flight, hotel room, movie tickets, and concert tickets and you realize how important designing mobile checkout experience is. A report by Baymard Institute suggested that 23% of shoppers who abandon their cart abandon it because of the complicated checkout process. This is specifically true for mobile shoppers for whom checkout is a multi-step process where inputting data is not as easy.

Challenges

The checkout process requires many inputs and careful attention from users.

Designing a one-handed checkout experience would mean users can complete the transaction with minimal thumb movement and fewer steps.
This is especially very important for users who are on the move or need to do the transaction immediately.

Solution

To design a one-handed checkout experience we have to minimize the information required from the users.

When choosing product variations like size, color, time/date and others, they should be easily accessible and discoverable.
We can use applications like Google and Apple wallet or autofill from things like Keychain, 1password, and LastPass to fill the information like names, credit cards, addresses, One-time-passwords.
We also must emphasize the simple and minimal thumb movements from the users.

Adding Items To Carts And Choosing Product Preferences At Thumb’s Reach

The logistics of shopping online can be simplified within three steps — adding items to carts, picking product variations, and completing the payment process.

As designers, it becomes essential for us to not only make these selections noticeable but also to place them within the reach of a thumb.

One way to achieve this goal is to display product variations in a tray that slides up when the user chooses an item.

Another way is to allow users to scroll through the page and quickly select variations of a product while the option to ‘Place the Order’ or ‘Buy’ stays static at the bottom.

3.1 Smooth Payment Checkout Flow With Options to Add Items and Choose Product Variations.

3.1 Adding Items to Cart for e-Commerce on On-Demand Delivery Apps. Video Credits: Shopping Choose | WE+AR TRBL | Tasty Hamburger App

Using e-Wallets And Password Managers For Swift Payment

The Payment Methods Report 2019 suggests that over 71% of online transactions are carried out via e-Wallets like Apple Pay, Google Pay, Alipay, Fitbit, Samsung Pay, YandexMoney, and others. These wallets are not only deemed to be faster but are also much safer and easier to access.

The checkout process can be made more efficient and straightforward. What’s more, you can also add a swipe-to-pay option for higher conversions.

3.2 UX Patterns for Payment Checkouts for e-Commerce Mobile Apps.

3.2 UX Patterns for Payment Checkouts for e-Commerce Mobile Apps. (Video Credits: SPACED Challenge (Travel + VR) | Checkout Promocode | Gamification Checkout)

4. Searching, Filtering, And Sorting Content With Reachability As The Main Goal

What Is It?

Without the right UX, finding just the right products or items can be a tedious challenge for the user. Searching, filtering, and sorting tools determine how easy or difficult it is for the user to browse the site’s product and item catalog.

Filters are a great tool to narrow down high volumes of content and to find the most relevant results.

In theory, they are different: sorting organizes the content according to a certain parameter, filtering removes it from view.

During Baymard’s Product Listings & Filtering study, it was observed that sites with an average product list usability saw abandonment rates of 67–90%. What’s more, there was about 17–33% abandonments from users trying to find the exact same types of product from e-Commerce sites with a slightly tweaked toolset. This resulted in approximately 4X increase in leads.

Challenges

Searching on mobile should be easily accessible. For example, Youtube, Amazon Prime, Slack, Google Maps make it difficult for users to reach the search menu by having them reach the top right corner.
Organizing the information hierarchy of filters as there are too many parameters and categories so that users can find what they are looking for quickly.
Manage multi-level information in UI especially when there are many categories and each category has many items.
Changing UI based on different states like “Filter is applied” and what “Filters are applied”.
All this should be accomplished by users in the reach of users’ thumb.

Solution

Use gestures or easily accessible buttons for search. When users go to the search screen give suggestions as well as open the text box immediately.
Speak the language of the users and keep users intent in mind when organizing filters. Keep the filters/sorting button near the reach of users. Also, make accessing and closing the filters menu with one hand.
To solve information complexity use either a two-step filtering control or side by side filtering control.
Apply filters immediately. Make filters interactive based on actions users take. Allow users to choose multiple options. Change filter categories to match applied filters.
Show recommendations, recently used or most frequently used information first.

For many apps, Search is one of the top 5 features used. But many app designers make reaching the search icon difficult. See the comparison below for Apple Maps vs Google Maps and Netflix vs Youtube.

UX Search Patterns for Apple Maps and Google Maps

Comparing Search Bar Reachability – Apple Maps vs Google Maps. (Large preview)

UX Search Patterns for Netflix and YouTube

Comparing Search Bar Reachability – Netflix vs YouTube. (Large preview)

Some apps use the search screen as a content discovery screen. They recommend users what they’d like, what they searched before, what’s trending and so on.

4.1 Creating a Search Page for Users to Discover Content. (Large preview)

Remove Friction And Impending Steps From Searching And Filtering

To make things really quick for users, we can make it so that when they tap on the search icon on the tab bar the keyboard immediately pops up so that users can start typing their queries immediately. See the examples of Netflix and SpotHero.

Many apps like Amazon or Google Drive use the search bar prominently at the top of the home page. In such cases, we can use gestures (swipe down) like the Inshorts app to immediately start typing instead of having to reach the top and tap on the search bar.

4.2 Searching and Filtering Made Thumb-friendly.

Double-Tap On The Search Icon To Pull Up The Keyboard

If you want to use your search page to show information to users then you can also use double-tap to pull up the keyboard like Microsoft News, Spotify, and Reddit Apollo.

4.3 Accessing Keyboard Made Easy with a Double-tap on ‘Search’ Icon.

Thumb Reachable Filter Menu Should Let Users Find Information Faster

Online shopping, booking, on-demand and other apps alike can contain a laundry list of items for users to choose from.

The biggest consideration for designing a filtering menu for small devices is the information hierarchy. Let’s look at these examples to understand how filtering and sorting can be designed when options are aplenty. These show how you can handle information complexity without letting one-handed usage suffer.

Also, filters should be responsive and reactive to users’ choices and indicate when filters are applied.

To make this process more responsive, search results can be filtered in the background simultaneously as users select the choices.

4.4 Sorting and Filtering Items on e-Commerce and On-Demand Delivery Mobile Apps.

4.4 Sorting and Filtering Items on e-Commerce and On-Demand Delivery Mobile Apps. Video Credit: Filters | Car Sharing with Friends.

5. User Input Controls Such As Forms, Pickers, Selectors, Dropdowns, Sliders That Make Up The Building Blocks Of An App

What Is It?

With smaller screens comes smaller real estate. Fundamental user interactions have to be reimagined in order to increase the productivity of mobile users.

Things like filling up forms, typing up the password, choosing date/time, making a selection, popovers had to translate well to touch interface without abandoning the metaphors of PCs.

Challenges

Inputting data on mobile devices is tedious, especially when there are a number of data fields to be filled.

Translating user interactions to smaller devices is not easy. The biggest challenges are:

Speed of user input should be very fast with minimal movement of users’ thumb.
Information should be gathered in a minimal number of steps.
The input control design should have an easily understood interface and metaphor.
The experience should be delightful and consistent.
Users must know their location and information must not be lost.

When done correctly, adding inputs in trackers, calendars, and others alike could become a short task.

Solutions

Any user action like filling up forms or making choices should be closer to the bottom. The flow of actions and choices should be consistent without any jarring UI changes.
Information needed to move ahead should be in thumb’s reach.
Data input options including notifications should be clear and near to the bottom.
Bigger forms can be divided into multi-step and multi-screen forms. This multi-screen approach should have going forward and going back very easily.

Fixing Filling Up Forms Starting With Sign-Up Forms

We all hate filling up sign up forms. They are time-consuming and ask for unnecessary information.

Filling up forms can be less laborious by turning a lengthy form into multiple screens. Using things like auto-fill, thumb reachable buttons for next and previous steps, continuous keyboard presence, and no scrolling makes this approach faster and easier.

5.1 Best Practices for Multi-Screen Onboarding Flows (Video Credit: Zenly & AirBnB)

Get Quick Input From Users With Minimal Thumb Movement

Positioning the user-input controls towards the bottom of the screen allows for quicker data entry and prompt call-to-action responses.

Use pickers, dropdowns, scrollers, and sliders to supply information to users.

5.2 One-handed User Input Controls for Accurate Form Filling (Video Credit: Periscope)

Smart Mobile Patterns For User Input Controls

Let’s look at some more patterns that make getting input from users easier.

5.3 One-handed User Input Controls for Mobile App Forms (Video Credit: Peach | Zova Workout & Fitness | Square Order)

6. Miscellaneous Patterns For Media Playback, Photo Capture, Photo Editing, And Map Navigation Patterns

With over 2 million apps on Google Store and 1.83 million apps on the App Store, it has become imperative for designers to make their apps stand out. One way to do this is to make common functions fun and smooth for users, and this final section is a round-up of miscellaneous user interactions.

6.1 Forget Pinching; These Apps Lets Users Zoom In and Out with One Thumb.

6.1 Whether it’s Selecting Emojis, Sending Images, or Listening to Audio Clips, Gestures Can Add Ease such App Interactions.

6.1 Whether it’s Selecting Emojis, Sending Images, or Listening to Audio Clips, Gestures Can Add Ease such App Interactions (Video Credit: Composer Concept | Gamification + Checkout)

Conclusion

Although reachability is a big part of it designing for one-handed usage, it is not just about ensuring everything close to users’ reach. Apps that have good one-handed use also save the time of users, remove friction, take out unnecessary steps, and most importantly focus on quickening the “distracted short burst usage” of apps.

We looked at many patterns that designers can use to solve different UX challenges. For more, you can check these websites to find patterns that help you design for one-handed use.

Smashing Editorial
(cc, yk, il)

Read more: smashingmagazine.com