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.

5 guidelines for logo design

The logo crafts the visual identity of a brand and is often the most identifiable feature for consumers, explaining why brands take such great pains (see: http://gawker.com/5150582/breathtaking-document-reveals-pepsis-logo-is-pinnacle-of-entire-universe) to ensure that their logos are well-crafted and immediately recognizable regardless of context. Some of these timeless design pieces can be seen in the Nike Swoosh, Adidas' 3 strokes and the golden arches of Macs. While some argue that great design immune to the test of time, it is common to see brands updating their logos to keep up with the evolution of the brand or to keep abreast of changing contexts (e.g. entering a different demographic). In any case, it is beyond argument that logos are what stick in the minds of consumers and a good use of this tool can indeed boost the memorability of your brand.

As a designer, I look out for certain features when designing logos, and these sentiments are shared by most other designers:

1) Ability to scale
Perhaps one reason why grand crests with extreme detailing are becoming less popular is due to the inability to scale. While detailing reflects an eye for the minute and are impressive when viewed up close, the contexts in which logos tend to be present in demand versatility especially in this day and age. On the small screens of phones or browser tabs, some logos become a blob of color due to the amount of detailing being lost when decreasing resolution. A general guideline would be to create a unique shape of the logo or to make the element in focus distinct. In this case, even when resolution is lost, viewers can still identify your brand from the general shape of the logo or its distinctive elements.

In the same vein, one has to be extra careful when following current trends, especially when it comes to extremely light lines and thin fonts. While these designs look futuristic and add a touch of class to any design, they will only work on high resolution mediums. This is more of a technical consideration as screens decide how to assign the final color of each pixel on a screen based on their own algorithms. On a display with lower resolution, the algorithm might decide that the average color of the pixel is the background color if your lines are too thin.

2) Losing color
Another popular mistake made by logo makers would be the obsessive use of colors to make their logo distinct. Examples would include

• using color as a distinguishing element ahead of shape 
• using a plethora of colors to convey a message
• use of complex coloration such as gradients 

In context specific design such as magazine or newspaper prints, one has direct control over how the logo will be presented, However, when required to produce the logo over a variety of mediums, such freedom is lost as the constraints of the medium are, depending on how well designed the logo is, made visible by the inadequacies in faithful reproduction of the logo. In order to avoid this, you should take pains to ensure that

• the shape of your logo should not be generic to the point that when color is lost, it is virtually indistinguishable (e.g. common geometric shapes or typefaces)
• the message you are trying to convey is not lost when the logo is reproduced in monochrome (e.g. a racial harmony logo like: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs7HtDwG1jRDT74zjujgmuRn_cRT_W9Ei1SspWMi-QRVVm9GdGfzNxntW_uaHyFrZd526hvITOPbOPCi6mM9fp9BvxnsoVnpyUMiGGB06pCf1yyVJX0sQdM4JF3va31HndrKKj7ldDmrkH/s1600/racialharmony.jpg will not carry any meaning once reproduced without color)
• avoid completely the use of gradients as they are complex to print and could result in extremely ugly rings of color and will be rendered unrecognizable when compressed into a low resolution format

That being said, if you have control over how the logo will be presented (e.g. if it will only be used in print publications), then it is OK to incorporate colors should it value add to your work. One point to note, digital media is most faithfully reproduced in RGB while CMYK would be more suited for print works. Another work around would be to have a set of guidelines for the logo that states how the logo should be reproduced, However, this will greatly reduce the versatility of the logo which might not be practical in some instances, especially when the logo is going to be used as a representation of a brand.

For some idea about the psychology behind colors: http://www.creativebloq.com/branding/choose-colour-logo-design-8133973 (I shall not pretend to be an authority on this)

3) Establishing a relationship between the logo and the brand/product

While some successful logos are totally abstract and unrelated to the brand or product, it can be seen that most embody some bits of the brand and what they are trying to sell. There is good reason as to why this is the case. When coupled with a message, a logo becomes a tool to inform consumers about what to expect from the company or product and allows them to decide if they are to buy into it. Abstract logos, on the other hand, no matter how well designed, remain only as a visual representation, which means that brands have to be able to communicate with consumers on another platform to signal their intents. That said, a brand with a rich history and communication with consumers (such as through ads or marketing campaigns) will be able to pull off abstract logos and then have more space to play with the aesthetics of it without having to be preoccupied about the message that it conveys. Ultimately, for a fresh brand, the logo is a good way to communicate to consumers about what your company does and what it believes in.

One key consideration when establishing this relationship would be to consider the demographics of your target group. After all, different signs and symbols are associated differently in different parts of the world. (e.g. the lucky number 8 in the Chinese culture has no significance in the west). Also, if one is to target the masses, it is not advisable to incorporate obscure references or sophisticated linkages between the logo and the brand. This is so as the ability of the logo to speak for itself is ultimately limited by the knowledge of your target group. 

Finally, while it may be impressive to be able to represent all of a brand's beliefs in a logo, this is certainly not necessary as it might only serve to confuse should the logo become too cluttered. Remember that the logo is the first point of contact between the brand and the consumer but is certainly not the only one. The first impression imposed on consumers should be one that invites them to buy into a product or philosophy rather than to bother them about the nuances of the brand.

4) Know your space

When asked to think about a logo, what comes to mind would be what's in the foreground. However, a logo is much more than that. It is well known that objects in close proximity exert influence on each other, affecting the overall design's unity, balance, hierarchy, scale, emphasis and contrast. It is for this reason that logo designers often require those who utilize the logo to follow strict guidelines regarding how much space must be left between the logo and any other elements. In this way, the logo will be perceived as a standalone entity and convey the message intended. Furthermore, the negative space will bring attention to the logo. 

On the note of negative space, negative space can also be used to great effect on logos. Since logos inherently occupy small spaces, the screen/print estate is limited. By carefully using the negative space within the logo, one can create tasteful design without adding to clutter. 

Additionally, since logos are often going to be placed next to brand names or product names, you might want to create some templates with the placement and relative sizing of the logo and names to ensure that they look good together. 

5) Do not copy

Well, this is pretty self-explanatory. No one wants their designs copied and in any case, it is theft of intellectual property. For all the talk the copying is the most sincere form of admiration, I would be pretty annoyed if someone did copy my work wholesale without informing me. Apart from avoiding pissing people off and the legal complications that infringement of IP brings, there is indeed a selfish reason why you shouldn't copy. A logo often entails more than a design. It includes the message that the original was trying to convey. By copying a logo, you have inadvertently imposed the values and perception of another brand on yours. While that might not be all detrimental, it takes away the ability of the designer to design the message. Contrary to copying, you should instead look for brands that sell similar products/believe in similar philosophies to analyse what they are doing right. Creating a list of what worked and what didn't will prevent you from making the same mistakes others did and allow you to gather feedback about what your target audience likes without even releasing your design!

Anyway, these are just some of my thoughts! Do comment if you disagree with my points or if you think I missed out something really important or perhaps just a message you want to leave :D Do look out for my next post on how I applied these on the CORE logo!