Tag Archives: phone

Mobile Home Screens

Mobile Home Screens

Better Home Screen?

Definitely without iPhone’ish glossy icons,
wasting potentially useful space around.
Want it or not, but glossy must stay in the past.
Near future is flat.

With aligned multi-sized widgets like Winphone.
With variety of widgets like Android.
But much more aesthetic than they are today!

With more information embedded into the icon-sized area,
like Facebook Home, three faces into small context area.
Ideally the home screen can delivery useful information in five-six different contexts even without any clicks on them.

Smaller widgets will remain and prevail,
because they are sized to our finger…

Tagged , , , , , , , , , , , , , , , , , , , , , , , ,

Mobile UX: home screens compared


Some time in 2010 I’ve published my insight on the mobile home screens for four platforms: iOS, Android, Winphone and Symbian. Today I’ve noticed it got more than 35K views:)

What now?

What changed since that time? IMHO Winphone home page is the best. Because it allows to deliver multiple locuses of attention, with contextual information within. But as soon as you go off the home screen, everything else is poor there. iOS and Android remained lists of dumb icons. No context, no info at all. The maximum possible is small marker about the number of calls of text messages. And Symbian had died. RIP Symbian.

So what?

Vendors must improve the UX. Take informativeness of Winphone home screen, add aesthetics of iOS graphics, add openness & flexibility of Android (read Android First) and finally produce useful hand-sized gadget.

Winphone’s home screen provides multiple locuses of attention, as small containers of information. They are mainly of three sizes. The smallest box has enough room to deliver much more context information than number of unread text messages. By rendering the image within the box we can achieve the kind of Flipboard interaction. You decide from the image whether you interested in that or not. It is second question how efficiently the box room is used. My conclusion that it is used inefficiently. There are still number of missed calls or texts with much room left unused:( I don’t know why the concept of the small contexts has been left underutilized, but I hope it will improve in the future. Furthermore, it could improve on Android for example. Android ecosystem has great potential for creativity.

May be I visualize this when get some spare time… Keep in touch here or Slideshare.

Tagged , , , , , , , , , , , , , , , , , , , , , , ,

Mobile EMR, Part V

Some time ago I’ve described ideation about mobile EMR/EHR for the medical professionals. We’ve come up with tablet concept first. EMR/EHR is rendered on iPad and Android tablets. Look & feel is identical. iPad feels better than Samsung Galaxy. Read about tablet EMR from four previous posts. BTW one of them contains feedback from Edward Tufte:) Mobile EMR Part I, Part II, Part III, Part IV.

We’ve moved further and designed a concept of hand-sized version of the EMR/EHR. It is rendered on iPhone and Android phones. This post is dedicated to the phone version. As you will see, the overall UI organization is significantly different from tablet, while reuse of smaller components is feasible between tablets and phones. Phone version is totally SoftServe’s design, hence we carry responsibility for design decisions made there. For sure we tried to keep both tablet and phone concepts consistent in style and feel. You could judge how good we accomplished it by comparing yourself:)


The lack of screen space forces to introduce a list of patients. The list is vertically scrolled. The tap on the patient takes you to the patient details screen. It is possible to add very basic info for each patient at the patient list screen, but not much. Cases with long patient names simply leave no space for more info. I think that admission date, age and sex labels must be present on the patient list in any case. We will add them in next version. Red circular notification signals about availability of new information for the patient. E.g. new labs ready or important significant event has been reported. The concept of interaction design supposes that medical professional will click on the patient marked with notifications. On the other hand, the list of patients is ordered per user. MD can reorder the list via drag’n’drop.

Patient list

Patient list

MD can scan the wristband to identify the patient.

Wristband scanning

Wristband scanning

Patient details

MD goes to the patient details by tapping the patient from the list. That screen is called Patient Profile. It is long screen. There is a stack of Vital Signs right on top of the screen. Vital Signs widget is totally reused from tablets on the phones. It fits into the phone screen width perfectly. Then there is Meds section. The last section is Clinical Visits & Hospitalization chart. It is interactive (zoomable) like on iPad. Within single patient MD gets multiple options. First options is to scroll the screen down to see all information and entry points for more info available there. Notice a menu bar at the bottom of the screen. MD can prefer going directly to Labs, Charts, Imagery or Events. The interaction is organized as via tabs. Default tab is patient Profile.

Patient profile

Patient profile

Patient profile, continued

Patient profile, continued

Patient profile, continued

Patient profile, continued


There is not much space for the tables. Furthermore, labs results are clickable, hence the size of the rows should be relative to the size of the the finger tap. Most recent labs numbers are highlighted with bold. Deviation from the normal range is highlighted with red color. It is possible to have the most recent labs numbers of the left and on the right of the table. It’s configurable. The red circular notification on the Labs menu/tab informs with the number how many new results available since last view on this patient.




Here we reuse ‘All Data’ charts smoothly. They perfectly fit into the phone screen. The layout is two-column with scrolling down. The charts with notifications about new data are highlighted. MD can reorder charts as she prefers. MD can manage the list of charts too by switching them on and off from the app settings. There could be grouping of charts based on the diagnosis. We consider this for next versions. Reminder about the chart structure. Rightmost biggest part of the chart renders most recent data, since admission, with dynamics. Min/max depicted with blue dots, latest value depicted with red dot. Chart title also has the numeric value in red to be logically linked with the dot on the chart. Left thin part of the chart consist of two sections: previous year data, and old data prior last year (if such data available). Only deviations and anomalies are meaningful from those periods. Extreme measurements are comparable thru the entire timeline, while precise dynamics is shown for the current period only. More information about the ‘All Data’ concept could be found in Mobile EMR, Part I.

Measurements in 'All Data' charts

Measurements in ‘All Data’ charts

Tapping on the chart brings detailed chart.

Measurement details

Measurement details


There was no a big deal to design entry point into the imagery. Just two-column with scroll down layout, like for the Measurements. Tap on the image brings separate screen, completely dedicated to that image preview. For the huge scans (4GB or so) we reused our BigImage solution, to achieve smooth image zoom in and zoom out, like Google Maps, but for medical imagery.



Tissue scan, zoom in

Tissue scan, zoom in

Significant events & notes

Just separate screen for them…

Significant events

Significant events

Conclusion: it’s BI framework

Entire back-end logic is reused between tablet and phone versions on EMR. Vital Signs and ‘All Data’ charts are reusable as is. Clinical Visits & Hospitalization chart is cut to shorter width, but reused easily too. Security components for data encryption, compression are reused. Caching reused. Push notification reused. Wristband scanning reused. Labs partially reused. Measurements reused. BigImage reused.

Reusability is physical and logical. For the medical professional, all this stuff is technology agnostic. MD see Vital Signs on iPad, Android tablet, iPhone and Android phone as a same component. For geeks, it is obvious that reusability happens within the platform, iOS and Android. All widgets are reusable between iPad and iPhone, and between Samsung Galaxy tab and Samsung Galaxy phone. Cloud/SaaS stuff, such as BigImage is reusable on all platforms, because it Web-based and rendered in Web containers, which are already present on each technology platform.

Most important conclusion is a fact that mEMR is a proof of BI Framework, suitable for any other industry. Any professional can consume almost real-time analytics from her smartphone. Our concept demonstrated how to deliver highly condensed related data series with dynamics and synergy for proper analysis and decision making by professional; solution for huge imagery delivery on any front-end. Text delivery is simple:) We will continue with concept research at the waves of technology: BI, Mobility, UX, Cloud; and within digitizing industries: Health Care, Biotech, Pharma, Education, Manufacturing. Stay tuned to hear about Electronic Batch Record (EBR).

Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Usability of Google Currents

This post is about digital publishing, about its usability. I used Flipboard for some time and it is good. Not excellent because of some mess on lower nesting levels, but it is a base line for other similar apps and services. Let’s look at Google Currents, I will assess them on Google Nexus S smart phone. So we have native Google device and native Google app. What result can we expect? Of course we want excellent, best of the breed! What we have in reality? Read on.

Level 0: Home Screen

We see sexy image and some icons on the home screen. Navigation is horizontal. I.e. to move between the pages we have to flip right, then left or right. Standard think on touch screens. One big surface and moving it with the finger. From aesthetics point of view home screen of Flipboard on iPad is way better. Ok, we are at the Level 0, Home Screen. And it has horizontal navigation. Take a look below:

Level 0, Home screen with horizontal navigation

Level 1: Fast Company and TechCrunch

I like to read Fast Company stuff, so I am clicking its icon. By doing that I descend to the nesting level, let’s name it Level 1. What we see at that level? Fast Company expands its content horizontally. We can navigate it as we did on Level 0, intuitively, everything the same and it is good. Looks at the snapshots below, demonstrating horizontal navigation for Fast Company:

Level 1, Fast Company with horizontal navigation

So far everything cool and we love Google Currents as an alternative to Flipboard:) But it is time to launch TechCrunch now. I love TechCrunch too, it is on my Home Screen as well as Fast Company. So, clicking TechCrunch icon! Starting to read, donw with first screen, trying to flip right and here comes an issue:( TechCrunch does not scroll horizontally. Surprise? I would call it a flaw in Interaction Design of the Google Currents. At the same level as Fast Company – Level 1 – TechCrunch does scrol vertically. How could I know it? I used to flip horizontally on Home Screen and on Fast Company. Look below at the vertical navigation of Tech Crunch at Level 1:

Level 1, TechCrunch with vertical navigation

There is strong inconsistency with content navigation at the Level 1. It is difficult to pay special attention to some widgets that serve as a hints how to scroll. Much better way is to implement same navigation direction and show no widgets as all. I could finish this post at this point, though we can go further if you like.

Level 2: Fast Company and TechCrunch

Let’s dive deeper into the content by those providers and write what we feel. At the Level 2 Fast Company resembles TechCrunch. It has vertical navigation. Below is a snapshot:

Level 2, Fast Company with vertical navigation

What we have with TechCrunch at the Level 2? Of course something different, we have got horizontal navigation. Look below:

Level 2, TechCrunch with horizontal navigation

Seems Fast Company uses more levels to structure its content. There is whole Level 3…

Level 3: Fast Company alone

There is content at this level. There are multiple entry points to it. You can get test content, or rich video content. Navigation is horizontal for both. Look below for text content:

Level 3, Fast Company with horizontal navigation

Here is video content below:

Level 3, Fast Company with horizontal navigation


Google Currents on Google Nexus S has severe usability flaws. There had to be some rules for content providers to stick to. As a user I do not want to care on the structures, I want content instantly, as I had it of Flipboard on iPad. With Currents things are not so obvious, which inspired me to draw a joke. IMHO the quality of Google products degrade. They repeat Microsoft’s way with issues, bugs and … market penetration. It’s sad.

Tagged , , , , , , , , , , , , , , , , , , , , , ,