3 Design Mistakes Plaguing FB's App Update

As Android App developers begin work to visually overhaul their apps to line them up with the Material Design Guidelines and, at the same time, keep up with design trends, we, the end-users are beginning to see flatter, more minimalist UIs and on the whole, a more streamlined feel to the user experience with Android. However, there is an inherent conflict between the objectives of Material Design and the whole notion of minimalism. While material design strips away much of the fancy 3D-esque effects seen on older interfaces trying to look advanced, it retains the core essence of establishing familiarity between the user and the interface. This is done through the use of depth in layers, something we experience in the physical reality.

http://designmodo.com/wp-content/uploads/2014/07/layers.png

This means that unlike minimalism, Material Design retains separation between elements and a sense of hierarchy. The depth created through shadows and color provide users with distinct areas to interact with the user interface. Having a standard to conform to across all Android apps also results in ease of recognition of allowable interaction with certain elements as they appear in the same way across the interface.

Physical buttons necessarily have borders and most have some form of elevation

On the other hand, minimalism is the buzzword of 2014. The idea behind minimalism is that by removing extraneous elements that are perceived as not key to the design or function of the application, it would result in a cleaner look with fewer distractions and more focus on elements that carry content. Furthermore, negative space also creates the impression of luxury and sophistication as it is ingrained in the human mind that space is scarce and those that are able to afford space without any real use are better off.

However, Material Design and minimalism share some points in common. For one, both dispense of gradients and fancy color schemes to go with solid, single-tone looks. Additionally, Material Design has some generous space allocations built in which are reminiscent of the ideas behind minimalism. Hence, it is easy to see how app developers might veer too far into minimalism when intending to conform to Material Design.

The Case of Facebook
A prime case that illustrates the danger of blind minimalism would be the recently updated Facebook app.

1. Lack of boundaries

The screenshot above is but one instance whereby boundaries between elements are sacrificed for a cleaner look. While the individual icons do look clickable by virtue of their color, it must be noted that the color scheme of individual groups and pages are not determined by Facebook and could very well blend in with the white background of the app. In such a case, there is less of an intuitive feel when it comes to clicking on these links. Frequent users of previous iterations of the app will find this less of an issue due to muscle memory but new users could be faced with a more frustrating time, especially if these low-contrast icons are present in abundance.

Not only does the lack of boundaries make it difficult to recognize clickable elements, Facebook's decision to use light shades in headers makes it even more difficult to make sense of the information presented. The cognitive load created whereby users have to draw their attention away from the larger, higher contrast elements to these subtle headers when looking for information is unnecessary and could very well be eliminated with the use of distinct borders.

Furthermore, the negative space used in place of defined boundaries is eccentric at best. The almost even spacing between headers to content from the previous group and the group it is supposed to represent creates a feel that these headers are not associated with either bits of content. This even spacing is also seen between words attached to icons and adjacent icons. This creates confusion with regards to whether content should be chunked horizontally or vertically and forces users to make sense of the content rather than go by their intuition. Minor adjustments to these spacings will definitely result in a more fluid user experience.

Personally, I feel that Facebook could have done a lot better by adopting a 2 column view for each group. While this reduces the amount of negative space, it is more than made up for due to:
a) less scrolling
b) closer proximity between elements that are meant to be grouped together in the first place.

2. Opposing animations
While design is usually thought to be static, animations are the other half of design in dynamic interfaces, which makes it no wonder that Material Design places so much emphasis on it. When less and less detailing is done to the static page (as with minimalism), more and more information is conveyed through movement. Through the way elements react upon user interaction, we are able to discern what is going on and how the interface is responding to us.

If the animation when swiping between tabs feels weird to you, it could possibly be due to the fact that the animations move in different directions within such close proximity. The title of the tab moves against the flow of the tabs and with the flow of the content while the content moves with your finger. This is against our expectation as the title of the tab is the textual representation of the tab and should indeed flow in the same direction as the highlights of the tab! A similar irregularity can be noticed in Material Design. However, what makes the Material implementation work would be that this opposing animation is only done at the first and last elements. For the tabs in the middle, the highlight stays centralized while the tabs move coherently in the same direction as the content. Furthermore, for the exceptional case of the end tabs, matters are not complicated by the title fading in and out in a direction opposing the tabs. This plays a major part in creating confusion as what is perceived to be part of the same element, providing the same information (of which tab we are on), moves in conflicting directions. With this, I feel that Google did a great job implementing swiping tabs.

3. Inconsistent styling
While Facebook seems to have ditched function over form, one puzzling change that was made would be the use of jarring shades of red and pink for the icons representing events and places. The color palette throughout Facebook remains very much in a single shade of blue, white and grey. This creates a consistency and identity which is easily recognizable and immediately attributed to Facebook's brand. Red, on the opposite of the color wheel, was only used to draw attention to notification counts and that worked due to the small size and the importance of the information it conveyed. With the color scheme of the new icons, Facebook has used colors that are too close to that of the notification count for objects that are not supposed to draw so much attention. The stark contrast pulls the user's attention away from all other elements residing harmoniously in the previous color scheme and creates unnecessary tension in the interface.

Another area of inconsistency would be the alternation between circle, and square icons. Previously, circular icons were reserved exclusively for chat heads/to represent conversations. This allowed users to immediately distinguish chat heads from other icons. Furthermore, all icons that were not profiles (from Facebook) were borderless (e.g. friends, newsfeed etc.) and grey. This allowed users to quickly get around Facebook using these clear signs. However, by using circles for "games", "page manager" "liked pages" and other Facebook tabs, we find that there is no longer a standard, making it impossible to determine which tabs are built into Facebook and which are profiles or pages.

Conclusion

With these traps that designers might fall into when designing user interfaces, application developers should refrain from the blind chase of trends that compromise the ease of use of their applications. With that said, minimalism does work from a purely aesthetic standpoint and as mentioned previously, gives a sense of luxury to designs. The use of minimalist design can be implemented if

1) the application gives sufficient cues as to how to interact with certain elements
2) the target audience is well aware of how to operate the application.

In such cases, minimalism is definitely the way to go as it moves away from the cluttered interfaces of yesteryear and provides a more modern feel. It too, forces the developer to consider what is necessary and to evaluate the true purpose of what he is building and ensure that the information is conveyed to the user in the most efficient way possible.

In the end, the success of the end product is very dependent on the context and efforts must be taken by UI designers to avoid cognitive dissonance on the part of the user.