Your web app’s user interface (UI) is the first thing that users will see and interact with, so it’s important to make a good impression. A well-designed web app UI design can help you attract and retain users, and even increase conversions. Here are 10 things to consider when designing a high-converting web app UI...
For a while now I’ve had a little side project bubbling around here at kc web design. I love weather. I love weather apps. So I’ve been creating my own weather app with some pretty unique features (all top secret!). I’ve had a number of proof-of-concept builds lying around that have utilised the Jquery UI script to deal with dragging, dropping and resizing but we’ve hacked it around so much to get it to do what we needed that its become a little unworkable. We did contemplate writing our own drag, drop & resize script but for a working prrof-of-concept the investment was a little high.
After hitting a nice patch of quiet time at kc web design kent I decided to revisit the old concepts and re-evaluate where we’d got to. The conclusion was that Jquery UI was to large and buggy to work for the job we needed and so I decided to go back to the drawing board. Making the decision to dismiss weeks of previous work is a hard one to make but when something just isn’t working you have to be bold. Hopefully the rethink and new direction will make the final product a lot better and it will actually save time in the long run.
After a lot of time Googling around it became apparent that there aren’t many light weight drag/drop/resize libraries around that would be suitable for what we needed and I was about to give up and start writing one of my own when I randomly came across interactJS.
InteractJS – Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+)
It sounded perfect, was very light and had a few nice extras included…but would it work for our very specific needs? We’re not scared of a bit of hacking around and experimenting here at kc web design so we quickly got together some rough designs and through in some test code and it worked…but then it didn’t…and it wasn’t doing what we thought it might do. So with a little help from the developer we got a bit further, then added our bespoke functions and extra bits and eventually we had a working prototype again that was far, far better than the original that we’d scraped.
So the moral of this story is – never be scared to throw things away and start again from scratch. Never be so precious of your work that you cannot or will not see its failings. Learning when to erase and undo will help you move forward quicker.
And also have a look at interact.js. It is a very good drag/drop/resize script.
Owner and Director at kc web design ltd
With over 20 years of experience in web design and development I've successfully led teams at both global tech companies, including Fujitsu, and my own ventures, such as kc web design ltd and music startup Go To Hear. As the Founder/Director
of kc web design ltd and Founder and CDO of Go To Hear, I have spearheaded the design and development of top-class website designs all over the world.
of kc web design ltd and Founder and CDO of Go To Hear, I have spearheaded the design and development of top-class website designs all over the world.
Latest posts by Paul Ledbrook (see all)
- Music Streaming UI/UX design version 2 - December 4, 2023
- 10 Things to Consider When Designing a High-Converting web app UI design - September 20, 2023
- How to Use Web Design to Improve User Experience - September 6, 2023
