Creating a Great User Interface For Your Web App
Friday, October 29, 2010
Today we are kicking off a series of blog posts that provide tips and tricks on how to create better web apps as well as insights behind the technology of the Chrome Web Store - Ed.
Looking at building a web app for the Chrome Web Store? The browser landscape has changed a lot recently and user expectations about the quality and polish level of apps are extremely high thanks in part to the success of highly polished mobile apps. Can you meet these high expectations with a webapp?
Fortunately, you now have a lot more power and flexibility with the user interface thanks to the power of HTML5, CSS3, and other new web technologies. It’s now possible to make a web app that is every bit as slick and polished as the best desktop or phone app, while still maintaining the flexibility and portability of the web. For example, using CSS3 transitions and animations, you can make actions in your app feel much more interactive. You can use CSS3’s support for gradients, reflections and rounded corners to create scalable interfaces that look as if they were built using hand-crafted images. And with the rise of GPU-accelerated graphics, you’re now able to create compelling 3D experiences.
However, creating great user experiences is about more than sizzle and polish. Another important factor is focus. Ideally, an app should accomplish a single task well with a minimal amount of distractions. Be judicious with your use of links and ads that could take users away from the task at hand. When the user launches your app, they’re trying to accomplish something specific that your app enables; help them get started right away by minimizing the steps that they need to take, especially when they’re first trying your app. If the first thing a user sees is a registration screen, many will bounce off (once you need the users to sign in, you can use OpenID and Google Accounts to simplify the process). By installing your app they’ve indicated something stronger than just clicking a link - they want to use your app to accomplish something specific. Keep the distractions to a minimum and keep your app focused on the job at hand and your users will be happier.
UI responsiveness in your app is also crucial. For example, let’s say you’ve built a photo stitching app that glues together photos into one seamless larger photo. This may require a lot of CPU horsepower or even that you do the heavy lifting on the server. Maybe the whole operation takes two minutes to complete. However, you can still keep your interactive performance high while the operation proceeds asynchronously. You could ship the CPU work off of the main user interface thread using an HTML5 Worker or you could offload it to a server with an XHR. That alone isn’t enough though. You need to give the user feedback while this is happening, ideally something cool and visual and not just a progress bar. Meanwhile, the user should be able to do other things. If that’s not possible, then cancelling needs to be easy and responsive. Interactive performance is usually something that needs to be designed into your app up front rather than added later as an afterthought, so plan ahead.
In short, you need to think both like app developer as well as a web developer. Putting a little extra thought into focus, performance, feedback and polish can make the difference between “meh” and “whee!”.
Looking at building a web app for the Chrome Web Store? The browser landscape has changed a lot recently and user expectations about the quality and polish level of apps are extremely high thanks in part to the success of highly polished mobile apps. Can you meet these high expectations with a webapp?
Fortunately, you now have a lot more power and flexibility with the user interface thanks to the power of HTML5, CSS3, and other new web technologies. It’s now possible to make a web app that is every bit as slick and polished as the best desktop or phone app, while still maintaining the flexibility and portability of the web. For example, using CSS3 transitions and animations, you can make actions in your app feel much more interactive. You can use CSS3’s support for gradients, reflections and rounded corners to create scalable interfaces that look as if they were built using hand-crafted images. And with the rise of GPU-accelerated graphics, you’re now able to create compelling 3D experiences.
However, creating great user experiences is about more than sizzle and polish. Another important factor is focus. Ideally, an app should accomplish a single task well with a minimal amount of distractions. Be judicious with your use of links and ads that could take users away from the task at hand. When the user launches your app, they’re trying to accomplish something specific that your app enables; help them get started right away by minimizing the steps that they need to take, especially when they’re first trying your app. If the first thing a user sees is a registration screen, many will bounce off (once you need the users to sign in, you can use OpenID and Google Accounts to simplify the process). By installing your app they’ve indicated something stronger than just clicking a link - they want to use your app to accomplish something specific. Keep the distractions to a minimum and keep your app focused on the job at hand and your users will be happier.
UI responsiveness in your app is also crucial. For example, let’s say you’ve built a photo stitching app that glues together photos into one seamless larger photo. This may require a lot of CPU horsepower or even that you do the heavy lifting on the server. Maybe the whole operation takes two minutes to complete. However, you can still keep your interactive performance high while the operation proceeds asynchronously. You could ship the CPU work off of the main user interface thread using an HTML5 Worker or you could offload it to a server with an XHR. That alone isn’t enough though. You need to give the user feedback while this is happening, ideally something cool and visual and not just a progress bar. Meanwhile, the user should be able to do other things. If that’s not possible, then cancelling needs to be easy and responsive. Interactive performance is usually something that needs to be designed into your app up front rather than added later as an afterthought, so plan ahead.
In short, you need to think both like app developer as well as a web developer. Putting a little extra thought into focus, performance, feedback and polish can make the difference between “meh” and “whee!”.