
Chapter 1 of 'Principles of Mobile App Design Engage Users and Drive Conversions' has many critical design principles. Still, the one that stood out to me the most is Organize and Label Menu Categories. Organizing and labeling menu categories is designing the app menus with very clear and descriptive menu options. Whether it is organizing the menu alphabetically or making sure that no menu labels overlap in content, it is critical to organize and label menu's clearly.
This is incredibly easy to overlook when designing an app, mainly if the designer primarily focuses on technical functionality. This one stood out to me because it captures the significant impact that seemingly nuanced design decisions have on apps and usability. "This is particularly important when a user turns to a menu as a last resort after exhausting options through search" ('Principles of Mobile App Design Engage Users and Drive Conversions' pg. 5) is a great description of the importance of deliberately organizing and labeling menu categories. Suppose it is being reviewed as a last resort by the user. The menu has overlapping categories, unclear descriptions, or is poorly organized. In that case, you can almost guarantee that the user will no longer be using that app in the future.

The app that I believe that has very deliberate, clear, and well organized menus is the 1st Bank banking app. The reason why this app's menu organization stands out to me is because it is one of the few banking apps that I have never had trouble navigating. Accessing all of your accounts is right up front and incredibly intuitive. The core menu at the bottom of the screen only has five labeled icons that are accounts, transfer, send money, deposit, and bill pay. Other than that the pull down menu is hidden from view until you click the menu button to uncollapse it. The uncollapsed menu is the one that I find is designed very well because this is the menu that the user uses to access all account settings, transaction histories, as well as having two different menu options for contacting customer support via chat or phone call. Overall, for a banking app, this is the only one that I have yet to feel lost in the app or not be able to figure out how to contact customer support from the menus.

Chapter 5 of 'Principles of Mobile App Design Engage Users and Drive Conversions' offered a lot of really great design principles. Still, one of the most essential principles I found in the chapter is Communicate Form Errors in Real-Time. Communicating form errors in real time is creating a visual response for the user to realize that they have incorrectly input information in the text or numeric fields. This allows the user to immediately realize that their form is invalid and will not be able to be processed until those inputs are corrected. This keeps the user from trying to submit a form with invalid fields. If a user submits invalid forms, it often times will cause the user to restart the entire process all over again.
Communicating errors in real-time can save the user lots of time trying to retrace their steps and ensure that the user is inputting accurate data. Therefore, real-time feedback is crucial to incorporate into apps that have required fields. For example, they are vital for apps dealing with sensitive information or text. Numeric inputs also have serious implications if the input is incorrect, i.e., government or financial apps.

An example of an app that seemed to fail in all three of these design principles (and more) was the mobile app portal for filing unemployment. The UX / UI of the unemployment app was a new discovery for me and drove me crazy. The mobile app was especially critical because many users did not have access to home computers or web portals. I had the experience of helping my brother-in-law file for unemployment during the height of the pandemic. That experience really exposed how difficult it is to correctly fill out government forms for unemployment, creating a high level of inaccessibility. As for organized labeling and menus, the menus and interface are incredibly cryptic in the description and layouts. The menu options will be repeated multiple times on a single page, and clicking on the same labeled tap in either section takes the user to different pages. Not only are the menu layouts not conducive to common mental models, but the menu options were labeled so that most of the users would not be able to infer what each tab was for.
The menu layout also exposed a lack of another design principle not mentioned above: creating frictionless transitions between mobile and web in chapter 1 of 'Principles of Mobile App Design Engage Users and Drive Conversions.' While in the mobile app, the user is never prompted to click a link to send them to a website, but after tapping certain buttons, the user will be sent to a website. Not only is this unclear, but the web portal you are taken to is simply an unemployment home page that does not correlate to the user's location in the form they are filling out.
Another issue with the app is that it had left out real-time form errors causing massive problems when people filed for unemployment. This should be a requirement for government agencies specifically because the amount of forms and fields you have to fill out for public agencies is immense. It became clear how important this design principle is because, for an app like an unemployment portal, it specifically requires exact data inputs, including social security, bank accounts, dates of employment, and tax info. Unfortunately, it allowed the user to submit information with errors, which caused significant delays in payouts and created a very high bar to entry for anyone applying for unemployment. The user typically wouldn't even be notified that there was incorrect information submitted until weeks later, and it would be a paper slip delivered in the mail.
The final design principle the unemployment app failed at is being responsive after significant actions. Once the user has completed a form, the user is not informed of whether outstanding tasks still need to be met. A common problem seen when people filed for unemployment was that they had only completed two of five forms. In addition, when submitting a form, there was no feedback of where in the process you were and if there were still outstanding tasks. This created a lot of guesswork and unnecessary repeating of forms. If the app had made a list icon or some type of visual representation of items that have been completed and items that are still unfinished, the user would know that they have not completely filled out all the necessary information needed to file for unemployment. These design principles may seem trivial, but the world got to experience the devastating effect lazily designed apps can have on people. The poor design of the unemployment portals for both mobile and web caused hundreds of thousands of people to go months without having any money.

Lastly, in Chapter 6 of 'Principles of Mobile App Design Engage Users and Drive Conversions,' the most impactful design principle to me is Responsive Feedback After Significant Actions. Responsive feedback can be defined as "apps that provide a visual animation or another type of visual eliminate this guesswork for the user" ('Principles of Mobile App Design Engage Users and Drive Conversions' pg. 26). This entails feedback such as adding an item to the shopping cart icon in the corner of the screen to let the user know that item has been stored in their cart. Another example of responsive feedback is having the ability to "like" items on a page and those items automatically get stored in you a favorites tab located on the core menu.
This struck me as one of the more critical design principles because of how often this feature is used and commonly overlooked. A large majority of apps are designed for the purpose of commerce. Without any feedback on whether or not you have selected an item, the app can really interrupt any shopping flow the user has. If an app is aimed at the user purchasing items, then the worst thing that can happen is interrupting that shopping flow.

The Levi's app is one of my favorite shopping apps that I think successfully meets all three of these design principals. Considering the Levi's store changes up its inventory constantly, I rarely know what is currently available to shop for. For this reason, my go-to actions on the app are to immediately begin to peruse the menu options so that I can pare down my search results. Not only are Levi's menus clear and defined categories, but they can be even further narrowed down through the filter menu once you are inside of a general category. For an app interface with a vast number of menu items, I would say that they have done a great job organizing and labeling their menu categories.
As for real time error reporting, the Levi's app does a great job of not letting the next field become active until the previous field has been filled in correctly. This is a nice feature because you only have to fill our your payment information once for it to be allowed for all purchasing going forward. With the app doing real time error reporting in the payment fields, the user has no way of inputting incorrect payment information. This prevents much more difficult errors later on down the road like getting all the way to the checkout page and not knowing why your order will not go through. If the card stored on file has expired, the app will also send an email notification to the user letting them know that the payment information will need to be updated.
With great responsive feedback that allows users to never be interrupted in their user experience. The app does the standard "add an item to cart" function while updating the cart icon to represent the number of items in the cart. It also allows the user to "heart" items they like so they can reference them later. This felt successful because when you "heart" an item, it brings up a pop-up screen explaining how the item will be stored in your liked items list. It will then be used to help curate your shopping experience. Once the user clicks okay, a red heart is added to the bottom left corner of the item. The user can select all liked items by choosing the heart-labeled favorites on the bottom core menu. Levi's app has always felt like a seamless experience. Never once has the app caused me to feel like my shopping flow has been interrupted, allowing me time to reconsider my purchase (for better or worse).
Comments