Building A Medical App: How Your App Can Work In A Clinical Setting

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 MillerClayton 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

  • http://twitter.com/HospitalTech/status/367883813676134400/ Hospital Tech (@HospitalTech)

    Building A Medical App: How Your App Can Work In A Clinical Setting http://t.co/o7yovntdVd

  • http://twitter.com/FolUp/status/367900647284166657/ FolUp Inc. (@FolUp)

    RT @hitconsultant: Building A Medical App: How Your App Can Work In A Clinical Setting http://t.co/fHrwNq7WJy #healthapps #mobilehealth

  • http://twitter.com/jasonbereklewis/status/367907421303218176/ @jasonbereklewis

    Make sure your app works in a clinical setting http://t.co/FRkiMF8cOM via @hitconsultant

  • http://twitter.com/Health2Dublin/status/367946472295518208/ @Health2Dublin

    Building A Medical App: How Your App Can Work In A Clinical Setting http://t.co/E67MO8f8v4

  • http://twitter.com/kgeorgel1/status/367956481108221952/ George Lakis (@kgeorgel1)

    Building A Medical App: How Your App Can Work In A Clinical Setting http://t.co/DLBgT6aDbB via @hitconsultant

  • http://twitter.com/drseisenberg/status/367999329396473858/ Dr. Steven Eisenberg (@drseisenberg)

    Building A Medical App: How Your App Can Work In A Clinical Setting #gratefulmed http://t.co/XeKiE1KXjW

  • http://twitter.com/PathSoft/status/368016954411323392/ Pathfinder Software (@PathSoft)

    RT @hitconsultant: Building A Medical App: How Your App Can Work In A Clinical Setting http://t.co/fHrwNq7WJy #healthapps #mobilehealth

  • Pingback: Technology News » Android Hybrids: An Experiment in Productivity – TIME

  • http://twitter.com/neovoca/status/368044693629968384/ Mat Phillips (@neovoca)

    Building a #medicalapp: how your app can work in a clinical setting http://t.co/Ba2RVNTz2Z #HealthIT #DigitalHealth >JC

  • http://twitter.com/IconMedicalNet/status/368116100044976128/ Icon Medical Network (@IconMedicalNet)

    Building A Medical #App: How Your App Can Work In A Clinical Setting http://t.co/cXwGXspQEj #mhealth

  • Pingback: Building A Medical App: How Your App Can Work In A Clinical Setting | Sante Innovations

  • Kel Mohror

    This article has no value what so ever for a mobile medical app (MMA) developer- none! It was churned for search engines, not for anything practical. MMAs are used in clinical situations and is subject to FDA regulation; the “web apps” this article mentioned are found on various “stores” by the thousands, the quality of which varies from good to POC.