Written by Clayton Miller, Visual/UX designer at Pathfinder Software
Showing off how your medical app can work in a clinical setting might lead you down the path of developing on a visually appealing medium like an iPad.If so, you’ll probably want to build a mobile web app vs. a native app.
While the trade offs of web apps versus native are well known, all too often, this means compromising on responsiveness, fluidity, and overall user experience. However, with some in depth knowledge of web technology, strong UX, visual design, and development you can avoid compromises.
Some examples of averting compromises:
1 – Responsiveness
Did you know that when you click a link in an iPhone or Android-based browser, there is a 300-millisecond delay built in?
It’s there so that you can scroll and double-tap to zoom, and normally, you don’t notice it because you’re navigating to a new page. When you’re using a single-page web app, though, it becomes quite pronounced, and makes the UI feel laggy and slow. Fortunately, there’s a way around it using open-source libraries such as FT FastClick to intercept the clicks. After you implement this, you should notice a big difference.
2 – Animation
Modern apps use animated transitions not just for eye candy, but often for a very good UX reason: it helps make changes in the UI less confusing for users, helping them maintain context. There have been ways to do animated transitions on the web for years and they do translate into mobile web. But, quite often, performance is an issue. A full-screen fade effect that is smooth on a MacBook Pro might be very choppy on an iPad (our experience).
Fortunately, there are ways around this, by taking advantage of what is known as hardware acceleration – using the GPU (the part of the system that’s specialized for graphics) instead of the CPU (the general-purpose processor). It’s actually possible to get hardware acceleration in web apps if you know the right tricks to trigger it (and there’s plenty of debate as to which tricks work best). It will likely take some experimentation, but you should finally end up with all of your animations working smoothly on the iPad.
3 – Unique UI
One last thing that always helps web apps is actually a bit counter-intuitive. One might think that to feel more like a native app, your app should closely mimic the visual design of one. This is actually not a good idea at all!
By trying to exactly reproduce native controls, you set your UI up for detailed comparison to how bundled and native apps work, and it’s often unconscious comparisons in the user’s mind that make the experience the most dissonant. In other words, you don’t want to make something that looks almost exactly the same but just “doesn’t feel right.” You can build a mobile web app that has its own branded look, fit within your design language and yet still use standard mobile conventions in a relatable way.
Mobile web apps are still a trade off. There are many advantages and disadvantages to each – but in our experience, a responsive, fluid user experience isn’t something you need to sacrifice.
About the Author
Clayton Miller is a Visual/UX designer at Pathfinder Software,a Chicago based mobile health & medical software development firm that designs, builds & launches products to engage users. When not hard at work on @PathSoft client work and not writing long essays at Interuserface.net (which is most of the time), he tweets @claymill.
Image credit via Pathfinder Software
