# Material Design - Alkemio V3 is not yet fully available for web, it is primarily focused on mobile apps (for now?). Therefore, V2 is being used in this review/gap analysis. In this document, the following components are discussed: - [Top level navigation](#top-level-navigation) - [Paper sections](#paper-sections) - [Cards](#cards) - [Data Tables](#data-tables) - [Buttons](#buttons) - [Chips](#chips) - [Text Fields](#text-fields) - [Typography](#typography) - [Helper Text](#helper-text) --- ## Top level navigation (new, implemented in sprint 41) ### Anatomy Material suggests using more of an app view, with a very thin bar on top and a drawer menu on the left. ![](https://i.imgur.com/E0codgS.png) ### Redesign? Although the current design differs from the navigation structure Material guidelines suggest, I would stick with the current (new) design, while adhering the components in it to Material guidelines when possible. Alkemio is not an app, it is an online platform, and I believe the current design communicates the connected nature of it better than Material's suggestions for a navigation structure. --- ## Paper sections ### Anatomy The usage of paper is not discussed in the Material Design 2 Guidelines. However, comparing the current visual style of the 'MUIPaper' to the examples given, it is clear that these do not align. In Material, white space is preferred to separate elements, and if that's not possible, the examples use subtle dividers. Also, in the context section of each hub/challenge/opportunity, an icon is placed in the right upper corner, which is not consistent with other sections on the platform. #### Expansion panels/Accordions On various pages at the platform, for example the community page in a hub, an expansion panel is used. These were used in Material Design 1, but there are no standalone accordions in Material Design 2. Expanding/collapsing is used in lists to show more/less detail of a list item, but that is very different from the way it is used on Alkemio. ![](https://i.imgur.com/YaMvlp6.png) ### Redesign? Yes. But because of the diversity of information that is displayed on, for example, a dashboard page, it is definitely not as simple as removing the background colour and border. Rounding the corners, using a white background, and using elevation instead of a border might do the trick, but this also has some disadvantages. Conclusion: this needs some work. --- ## Cards https://material.io/components/cards ### Anatomy The cards on Alkemio do not fully align with Material guidelines. For example, Material suggests displaying fewer information on the card on first sight, and then create the possibility to extend the card to show additional information. Furthermore, the image on the card has a different aspect ratio (close to 1:2 instead of 1:3) and the use of supporting text is suggested. ![](https://i.imgur.com/AKwtYr7.png) ### Redesign? Yes, I suggest a redesign of the Alkemio cards. --- ## Data Tables https://material.io/components/data-tables ### Anatomy Material Design 2 suggests the style as displayed in the screenshot below. When hovering over a row or selecting it, the row gets a background color. There are no alternating background colours as is currently the case on Alkemio (see second screenshot) ![](https://i.imgur.com/W3jV505.png) ![](https://i.imgur.com/ngEnwN0.png) ### Redesign Yes, I would suggest following the Material Design 2 Guidelines. It might be worth considering, however, if it's necessary to display all of the information that is currently being done. For example, in the second screenshot, the columns 'First Name' and 'Last Name' are not adding a lot of value since the table also displays 'Full Name'. When just one or two columns are involved, displaying them in a list (https://material.io/components/lists) may also be an option, which has a much cleaner look (see printscreen below for a non-related (but it gives an impression) example) ![](https://i.imgur.com/QBRYz9D.png) *Image could be profile pic or org. logo, Title could be name, subtitle could be email addres* ![](https://i.imgur.com/v9cUUf4.png) *Example of a list with checkboxes* --- ## Buttons https://material.io/components/buttons ### Anatomy Material Design 2 suggests 4 types of buttons (see screenshot below). Alkemio seems to be using the same, but there are some inconsistencies. These are described in the Redesign-section. ![](https://i.imgur.com/4qZxX94.png) ### Redesign? Yes, the following: #### See more/See all At the bottom of each section on the dashboard of a page, there's a link to see more (all). I suggest using a button without outline or background, but with the plus icon and with capitalized text (no. 1: Text button in the screenshot above). Furthermore, I would suggest changing the SEE MORE in + READ MORE and use this button consistently for all text sections and using + SEE ALL for sets of cards. ![](https://i.imgur.com/Lbonjvl.png) #### Member Once you become a member of a hub/challenge/opp, the JOIN-button (which is consistent with Material Design 2 Guidelines) changes into the word MEMBER (see screenshot below). This has the appearance of a Text Button (1), but you cannot click on it. It would be better to have a label with the word member as is also done on the cards (for example, see screenshot above). ![](https://i.imgur.com/1rfUMvk.png) #### Sign in The use of buttons on the Sign in page (see screenshot below) is not completely consistent with Material Design 2 Guidelines. It might be considered to use a Contained button for Sign in and Sign up, and a Text button for reset password, which could be aligned next to the sign in button. On this page and the sign up form, there is also some work to be done on spacing and text. ![](https://i.imgur.com/fvQgHNk.png) --- ## Chips https://material.io/components/chips ### Anatomy The chips on Alkemio seem to be following Material guidelines. However, a dot is placed at the position of the optional thumbnail. ![](https://i.imgur.com/FUZff8P.png) ### Redesign? Since the dot doesn't identify anything, I suggest removing it. Furthermore, although Material also allows for outlined chips, I would suggest using a background instead since this is used more often. --- ## Text Fields https://material.io/components/text-fields ### Anatomy For the most part, text fields on Alkemio seem to be in line with Material Design 2 Guidelines. However, the assistive text on the platform is placed in a tooltip that appears when hovering over a help-icon, while the guidelines suggest placing these underneath the text field. ![](https://i.imgur.com/6bw7TJk.png) ### Redesign? No. --- ## Typography https://material.io/design/typography Material Design 2 doesn't suggest what headline to use in what situation, however, compared to the examples they give, some of the headlines on Alkemio seem to be too large. For example, H3 is often used at places where H4 or even H5 would better fit the Material Design look & feel. Furthermore, it doesn't seem to be very consistent when H3 and when H4 is used on some of the pages. ![](https://i.imgur.com/OJ3PD1D.png) *E.g. My challenges (6) is H3, Explore Challenges is H4* --- ## Helper text On Alkemio, there are a lot of help icons. A tooltip appears when hovering over them. Material Design 2 also suggests the use of tooltips, but without the use of a help-icon. Instead, the guidelines suggest displaying the tooltip when hovering over the element itself that is being explained. ### Redesign? Since Alkemio is a new platform that brings new ways of interacting with each other, it might be appropriate to offer more guidance than Material Design 2 Guidelines suggest. However, the use of help-icons, tooltips, ánd in some cases just plain text for explanation looks a bit messy. So yes, I suggest a redesign, thorougly reconsidering the neccessity of each helper text and deciding upon one consistent way of displaying it.