UI Challenge #1 - Button

 Research

1. Social Media Button

• Purpose
  Expandable shortcut for social media share button, reduce space usage by using the limited space

• Function Allow users to easily share in their social media

• Coherent Icons and text used are easy to be recognize by the users

• Ease of Use Clicking the share button will directly made them choose which social media they want because of simple but clean animation

• Enjoyable The share button design is simple but clean. Minimalist is the trend nowadays

• Visual aesthetic & communication The design style is minimalist, it is very simple and clean. The usage of monochrome color allows clarity for users and does not create any confusion by using different type of colors.

• Interactivity When user hover the button, the cursor state will be in Link Select. This will let users know that the button is clickable. Once the button has been clicked, it will be animated to different social media icons for users to choose. Once users choose their desired social media, the button will be animated once again with a tick icon; to show that the users has successfully shared in their social media.

• Usability and engagement
  The use of simple icon and text allows users to know of the button’s function. The simple design and animation is user-friendly for all ages and all devices.

2. Like Button

• Purpose
  Indication of liked posts or pages

• Function Allow users to tap or click the like button

• Coherent Icons and text used are direct and easy to be recognize by the users

• Ease of Use Tapping the like button will trigger an animation of the heart (for mobile), click the like button will also trigger an animation of the heart and turn the button color to pink (for web browser) to show users that they have liked a post

• Enjoyable The animation of the heart looks like folding an origami. It is a well designed animation

• Visual aesthetic & communication The design style is minimalist, it is very simple and clean. The usage of pink color as an iconic color will make users to automatically recognize it as a like button

• Interactivity Users will see a grey colored button. Once they tap or click it, it will trigger an animation where the heart is folding like origami and turns into pink color. The animation is visually unique because it doesn’t look basic

• Usability and engagement
  Users just need to tap or click once in order to use this button. Hence, it’s suitable for mobile users and web browser users. The design and animation of this button will make users to be engaged because of how visually unique the animation is

3. Mailing List Button

• Purpose
  For users to join the mailing list

• Function Allow users to tap or click the button and type in their email

• Coherent Colors used are only two, which is contrast for users to easy recognize

• Ease of Use Clicking the button will let users to type in their email in order to join the mailing list. After finish typing, users can click the arrow button to submit their email.

• Enjoyable The animation of the button is simple and smooth, it makes users feel the interaction is smooth

• Visual aesthetic & communication The design style is minimalist, it is very simple and clean. The usage of colors to make the button contrast will make user easy to use the button

• Interactivity When users click the button, an input field will appear for users to type in their email. Once they typed in their email, all they have to do is to click the arrow button to submit their email. After that, joining the mailing list will be successful for the users.

• Usability and engagement
  Users just need to click and type their information for this interaction. Hence, it’s not time consuming and direct.

My Button Design

Social Media Share Button

References

Retrieved from: https://dribbble.com/shots/3130851-Social-Share-Ui-Design

Retrieved from: https://fribly.com/2019/10/03/sliding-social-share-button/

Sketches

Based on the references, I've sketched out 2 style of buttons as seen in the picture above. I decided to go with Style #2 in the end because of it looks much more organized and related with each other.

Flow Chart

Design Assets

These are design assets that I've made for my button

Final Outcome

This is a button for sharing in social media. The design style for this button is simple and monochromatic. I only use 2 colors so that users won't be distracted with too many colors.

When users click the share button, there will be different icons of social media showing up. Users can choose which social media they want to use. After clicking it, loading animation will appear and tick icon will also appear, indicating that users has successfully shared.

Reflective Evaluation

For UI Challenge #1 - Button, at first I was actually mind blown and confused at the same time because I have never used Unity before. I learned a lot of basic stuffs over and over again with Mink, so that I can understand Unity as much as I can. Honestly, I thought we had to do a simple button but when I saw my classmates work, I was very amazed with their creativity. I was embarrassed with what I did after seeing their buttons, but I'm still proud with my first button ever. Even though what I did for this challenge is pretty simple and normal, I do feel like I'm learning a lot of things, especially the basic stuffs!