Tag Archives: design

Grand Piano Redesign

Non-IT post. It’s about design and music.

When I played piano I used to pay attention to the instruments visual look, keyboard feedback and produced sound. In that exact order. If the piano didn’t look aesthetic, didn’t mirror everything in front panel, didn’t have forms or nice wooden patterns, I didn’t like that instrument. Keyboard was may be most important, but I still rank it second. If keyboard was soft and easy, it was disaster. My favorite keyboard had to be pretty demanding, you had to make your fingers kicking each key properly. That was required for speedy playing. Really very fast playing, faster than teachers. It was impossible on easy keyboard somehow… The sound was last. I liked the sound of German grand piano, didn’t like the sound of Estonian ones. Though it was only third priority.

So what do we have today? If I started piano playing again, what would be the priorities? The visual look would remain a number one. And I would like modern design. Check out what’s emerged during these years… May be it worth a try?







Tagged , ,

iPhone: Spec & Life

You probably noticed that all(?) iPhones were presented with kind of triangle on top right or top left corners. Take a look at the official spec from Apple’s site:


It seems that it [triangle in the corner] is a intentionally designed thing. In the real life the phone cracks there. Hence, the slick design is for easier slip from the hands, and the crack area for actual cracking. Take a look below:



Taking into consideration that such feature is visible on all iPhone and iPad specs, I’m warning you to beware of it. Unless you want to get a nice crack.



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

Android First

Very short post about obvious turn. I wanted to publish it week ago, but couldn’t catch up with thoughts till today. So here it is.

Mobile First?

Interesting times, when niche company made revolution but now is returning to the niche. I mean Apple of course, with revolutionary smartphone since 2007. They challenged SaaS. Indeed Apple boosted S+S (Software + Services) with the Web of Apps. iPhone apps became so popular, that it became a market strategy to implement mobile app first, then “main” web site. What is main finally? Seems that mobile has become the main. Right now I am not going to talk about which mobile is right: native or web. You can read it on my post ‘Native Apps beat Mobile Web’. Be sure that new wrist-sized gadgets will be better programmed in native way than mobile web. Hence, what we got? Many startups and enterprises went mobile first. There is a good insight by Luke Wroblewski about ‘Mobile First’.

Who is first?

OK, Apple was first and best. Then they were first but not best. Now they are even not the best. It is ridiculous to wait five years to switch from big connection hole to smaller mini-USB sized Lightning hole… The bugs with battery drain are Microsoft and Adobe like. It is not the Apple of 2007 anymore. So what? Those flaws allowed competitors to catch up.

What is main Apple advantage over competitors? It is design. Still no one can beat emotions from Apple gadgets. There was another advantage – first mover advantage. What is main competitors’ advantage? Openness. Open standards. Android & Java & Linux is a great advantage. Openness now beats aesthetics. Read below why.

Android First!

iPhone & iOS & iTunes is pretty close ecosystem. Either you are fanatic to expect some openness in the future, you can wait and hope. But business goes on and bypasses inconveniences. Openness of Android allowed Facebook to design brand new user experience, called Facebook Home. Such creativity is impossible on iOS. I am not telling whether Facebook Home rocks or sucks. I am insisting on the opportunity for creativity. Android is just a platform for creativity. For programming geeks. For design geeks. For other geeks. Be sure others will follow with similar concept like Facebook Home. And it will happen on Android. Because tomorrow Android is First. Align your business strategy to be sync’ed with the technology pace!

Who worries about Apple? Don’t worry, they are returning to the niche. Sure, there will be some new cool things like wrist-sized gadgets. But others are working on them as well. And others are open. New gadgets will run Android. Android, which UX is poor (to my mind), but which enabled creativity to others, who are capable of doing better UX. They have got the idea of Android First.

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

The Power of Paper

Here are ruminations on the real power of the paper and other “two dimensional” surfaces we use to present data or information. Inspired by respectful scientists of visualization since 1960s…

Typical answer from many (all?) of you about dimensions of the paper is 2 (two). Not a big surprise.

Paper sheet, two dimensions

Paper sheet, two dimensions

You see vertical and horizontal axis, what is called width and height. Below is a typical sheet to confirm you are right.

Width, Height

Width, Height

Let’s look at the same sheet more carefully. There is a gradient light/shadow on it. Consider the strength of the light or shadow as a value. It is true third dimension. We’ve got the sheet with three dimensions: width, height and value.

Width, Height, Value

Width, Height, Value

Well, so what? We squeezed three dimensions. What else?
Of course there is opportunity for fourth dimension:) Let’s pay attention to the surface of the paper, represent it as a texture, thus make it applicable for digital visualizations. Texture could be different. Don’t mix it with the pattern. Same texture could be scaled in and out, but it is still same texture. Below is a same sheet with texture as fourth dimension.

Width, Height, Value, Texture

Width, Height, Value, Texture

What else? Is our piece of paper done? No! There is fifth dimension – color. Code something into color and you use five dimensions. Don’t mess up value and color, they are different things. Hence, below is a same sheet with five dimensions.

Width, Height, Value, Texture, Color

Width, Height, Value, Texture, Color

At this point I am sure you are confident that we are still able to use even more dimensions. Here is 6th. Size. The sheet could be of different size. Smaller, bigger. Size also encodes, size does matter.

6 dimensions

6 dimensions

Very good. What else on that piece of paper (or digital picture) is capable to encode? The shape. Different shapes encode different things. Below are samples of the shapes, all with 6 dimensions. Together with shape encoding we are getting 7 dimensions.

7 dimensions

7 dimensions

OK, we are not finished yet. There is still a dimension to use. Guess what? Orientation. The sheet (and digital image) could be oriented differently. Independent of shape or size. Below is example.

8 dimensions

8 dimensions

So here you go – 8 dimensions to use during information visualization. All 8 are applicable for paper and digital designs. Very important for efficient BI designs. How to fit Big Data into single widget? Make information from data. But what if information is big too? Use efficient information modeling to get much much more from the same piece of space. This is design wisdom. Use it. Start from 4-5 dimensions. Continue to 8.

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

Mobile EMR, Part IV

This is continuation of Mobile EMR, Part III.

It happened to be possible to fit more information to the single pager! We’ve extended EKG slightly, reworked LABs results, reworked measurements (charts) and inserted a genogram. Probably the genogram brings majority of new information in comparison to other updates.

v4 of mEMR concept

Right now the concept of mobile EMR looks this way…

Mobile EMR v4

Mobile EMR v4

New ‘All Data’ charts

Initially the charts of measured values have been from dots. Recent analysis and reviews tended to connect the dots, but things are not so straightforward… There could be kind of sparkline for the current period (7-10 days). Applicability of sparkline technique to represent data from the entire last year is suspicious. Furthermore, if more data is available from the past, then it will be a mess rather than a visualization, because there is so narrow space allocated for old data. Sure, the section of the chart could be wider, but does it worth it?

What is most informative from the past periods? Anomalies, such as low and high values, especially in comparison with current values. Hence we’ve left old data as dots, previous year data as dots, and made current short period as line chart. We’ve added min/max points to ease the analysis of the data for MD.


Having genogram on the default screen seems very useful. User testing needed to test the concept on real genograms, to check the sizes of genograms used most frequently. Anyhow, it is always possible to show part of the genogram as expanded diagram, while keep some parts collapsed. The genogram could be interactive. When MD clicks on it, she gets to the new screen totally devoted to the genogram with all detailed attributes present. Editing could be possible too. While default screen should represent such view onto the genogram that relates to the current or potential diagnosis the patient has.

In the future the space allocated for the genogram could be increased, based on the speed of evolution of genetic-based treatments. May be visualization of personal genotyping will be put onto the home screen very soon. There are companies providing such service and keeping such data (e.g. 23andme). Eventually all electronic data will be integrated, hence MDs will be able to see patients genotyped data from EMR app on the tablet.

DNA Sequence

This is mid term future. DNA sequencing is still a long process today. But we’ve got the technology how to deliver DNA sequence information onto the tablet. The technology is similar to BigImage(tm). Predefined levels of information deliver could be defined, such as genes, exoms and finally entire genotype. For sure additional layers overlays will be needed to simplify visual perception and navigation thru the genetic information. So technology should be advanced with that respect.

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

Abstraction in Design

The problem.

To design better software (and software-hardware solutions) one needs to properly abstract the business. Good and adequate abstraction of real-life leads to good system design. And vice verse, bad design is an origin of the failure to computerize smth. Who is guilty? The one who took responsibility for design, because others follow the first guy.

What is most important in software design?

Many bright people will fail to answer this question properly. It is a burden of bad education in computer courses. I’ve measured hundreds of people around the world, how they understand the design discipline. 98% understand it too shallow. Many will talk for hours about inheritance or encapsulation, templates and whatever imagined, but almost nobody will tell you a word abstraction.

Abstraction is most important in design. How we abstract the real life, real business. What is a proper model abstracted from the physical (hard) word? My observations suggested that the best vision for right abstraction is owned by graduates from physics, chemistry specialties, but not from computer science. Paradox, but it is a reality. If you have a physicist who designs the software system – you are lucky one, your project will not fail:) Physicists has an integral vision onto the world, they apply better abstractions than others. Sorry guys, but I can confirm this with my intentional observations in the industry for ~15 years.

So, abstraction is the most important word. Abstraction is the most important skill. Everything starts with abstraction. Abstraction is not dependent on your favorite design method, because it is present in Object-Oriented Design, Design by Contract, Test-Driven Design, Model- Driven Design, Structural Design, Procedural, Functional, Entity-Relationship, etc. Just take the list from Wikipedia and ensure that abstraction is the first step for design. You could abstract into a structure, into a function, into a compilation unit, into a namespace, into a family of algorithms, etc. This post is more high-level, I would like to switch to the dilemma, what are you dealing with during the abstraction process?

Abstraction levels.

Abstraction leads to different approaches (and decisions). Hence you should be sure you are applying your abstraction at the correct level. Doing that at an inappropriate level may lead to severe design flaws. Let me visualize those abstraction levels for you.

You might notice that many things could be abstracted into some kind of hierarchy, that resembles a tree. It is normal, we have a tree in nature. We have a tree as an organizational structure. We have hierarchy of classes and so on. Below is a picture of the tree.


But is a tree is always a tree? At the abstraction level, as we looked at it, the answer was yes. We can confirm trees in real life, we all occupy some positions in some organizations. There is a tree. No doubt. OK, let’s look at the tree closer, zoom in and look again.


It is mesh! It is not a tree structure anymore. In has changed its structure from tree to mesh or grid. We are dealing with the same wood but at a different abstraction level. At this level, a different model will be designed to reflect the specifics of the thing. Mesh has its own patterns and rationales. If your task is better solved at this level, then forget the tree and design it as a mesh. All you need is to double-check you are really at this abstraction level. I just open the eyes for you that there was a different level, just FYI. It is observed in real life too. Take Enterprise 2.0. It is all about new connectivity within the organization. The static tree of the organizational structure remains, but new relations are established, which resemble the mesh. Even if they look like horizontal trees, overlapping with tree of positions gives you the mesh. Hence if you work on Enterprise 2.0 abstraction, then you have to consider the mesh instead of the tree. Think about other samples yourself, I just confirm there are many of them around you. Well, what about looking even more closely at the same thing? Zoom in again.


Oops, it is again the tree! What is going on? You just did abstraction at one more level and got a different picture than on the previous level. Yes, there is a tree again. Small but tree (sounds like Sad but True by Metallica). Sample from real life? Take the same sample, about Enterprise 2.0 initiative within the organization. There could be a mash between departments or groups, but pure tree within a small group. And it is a common situation. OK, just for fun, to demonstrate you even more abstraction levels:) Return to the initial tree and zoom out.


Wow, it looks again like a grid. We switched context from the tree to the grid one more time. We got the same metamorphose while went in the opposite direction, we zoomed out. Everything cool, no signs for panic. It is just one more abstraction level. Still dealing with the wood, but how different it is! What else? Let’s look below the ground level!


It looks like a second tree below the ground. Tree if deal at this abstraction level. We all know that roots could be the mesh if analyzed closer, and again the tree and so forth. I’d like to mention here the relation to another pattern called symmetry. We are not talking about precise or non-precise symmetry today. We are playing with the trees and the meshes. There are some other combinations remained. You could play yourself. Enjoy.


Remember that a single abstraction level is insufficient. Always look from different abstraction levels to your real thing for which you are going to design some model. The better you dissect the views into different abstraction levels, the better design you can produce. The best design patterns you will apply at every abstraction level, then better your design will be. After understanding this fundamental concept, your designs will definitely get better. Happy designing! And sorry if you are not a physicist.

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