How I have designed an attractive radio button with simple HTML and CSS only
For any web or mobile application, whether it is a minimum viable product (MVP) or fully functional production ready application irrespective of business model, in my opinion, user interface (UI)/user experience (UX) is the first and most important thing people notice once they landed on your application. don’t you think so..?? well, personally I also notice UI/UX first whenever I open any application online.
Why UX is so important for us?
I believe UX plays a vital role in the success of any application. It increases user's engagement to your application and hence customer satisfaction and more hits to your website or application. a win-win for both I guess... 😛
people almost never come back to application or website having bad UI/UX, unless their competitor has even more bad UX.. 😝 just kidding..!! people always think from their own perspective whether the application is easy and nice to use for them.
I personally feel UI/UX increases product value...!! if you don’t feel the same, well then I will not argue with you as you are also correct from your perspective.
So I was thinking to create some nice user experience out of boring default form elements that are available in HTML5 by default. My goal was to provide a rich and interactive experience for the users who uses the application and feel great about it.
I started experimenting with different approaches for designing the radio button which should be simple yet with a nice user experience. so here I am sharing one of the radio button code with you all.
I will try to explain what I have done here as simple as possible, I change the look of radio button by making it bigger in size and ensure that the transition of switching from one option to another have a feel like a little push and pull and gravitation do the rest of the work. that's it..!!!
below are the CSS file and the simple HTML5 form for designing the radio button
and here is the result from the above 🎉
here you can observe how few lines of CSS impacted the UI/UX
About the author
feel free to follow me on GitHub https://github.com/SK-CSE
or connect with me on LinkedIn https://www.linkedin.com/in/saurabh-kumar-7748015a/
for more post like this follow https://medium.com/khojchakra
