How to optimize for different screen resolutions.

12 Jan 2010 - 2:22am

Last reply:
4 years ago

3 replies

3427 reads

Daniel Demel

2010

Hi all,

I am working on a software interface which is going to be used by
healthcare professionals while counseling and fitting medical
instruments for patients at the same time. Setup is usually a
computer on a desk, operated by the healthcare professional while his
patient is sitting on the oposite side.

The current UI is optimzed for 1024 by 768. What we could observe
while visiting users is the fact, that most of them use 17" to 19"
screens. Some go bigger, some use 16:9 laptops.
But most use the 1024 by 768 even if the display supports much higher
resolutions. The effect is a upscaling but bluring UI. But everything
gets bigger, which is appreciated when at the same time working they
want to focus on their patients.

For the new software we use Microsoft's WPF, which is a vectorbased
UI. Now that we have optimized the screen layout (multipanels, some
with fixed widht or height) and font size for 1024x768 we want to
find a good solution for bigger screens with higher resolution. Which
could be using an liquid layout providing more spacing between
elements and more width for text, or we could use the advantage of
working with a vectorbased UI and scale up / zoom all screen elements
(text, images, buttons).

Has anyone some experience for optimizing for different resolutions
and screens? What do you think of switching to another resolution
when starting a software, or scaling up some elements to a certain
degree while stretching others when you drag the application window
to a bigger size?

I would be glad if one can provide some input or examples.

Kind regards,
Daniel

Comments

13 Jan 2010 - 6:48am

uladzimir.palkh...

2010

Hi Daniel.

First, I think that switching to another resolution is not a good
option, since this is not really necessary from software point of
view and will not be understood by the user. I'm recalling old-style
DOS graphical applications which were able to work using only specific
resolution. So this option is like back to 80's ;)

Second, there are two options here:

1. To scale up content and panels. Bigger resolution - > Bigger
panels and widgets -> Bigger text size, bigger images, etc. You can
find this approach implemented here:http://www.mscui.net/PatientJourneyDemonstrator/.
Please see Primary Care demonstrator. This is Microsoft attempt to
show how Silverlight (code name WPF everywhere) can be adopted for
the need of medical employees. Try to resize window, looks
impressive.

2. To show more content. Bigger resolution -> Bigger panels and
widgets- > Font size persists the same however more content becomes
available. More list items, more images, more other content
available. Unfortunately I can't provide you a live example here.
However the idea is simple. Try to open outlook and make the window
high lower - you will see that it displays not 20 but 10 emails for
example.

In general it should be known why users need higher resolution and
bigger monitors. Do the need to view content bigger or to view more
content? Taking into account that most of target audience use
1024x768 even if display supports a higher resolution, probably
option 1 is the right choice.

thank you very much for you reply and the insightful link to the
Demonstrator. I met with one of our WPF developers yesterday and he
already implemented a behavior similar to the demo by today. This is
really a strong thing with just a couple lines of code in WPF.

You brought it to the right question to answer: more vs. larger.
I would definitely choose the upscaling in case of an application
which deals mostly with focused tasks and manipulating only few
objects - instead of a vast amount of data - while the user must also
keep eyes on the patient.

Changing resolution temporary is still used in games, when the
graphic card has not power to run smoothly in full resolution but
then focus is clearly wanted on the game only, no switching between
application windows. Which is truly "old school".

I am currently trying to do exactly what you are describing here - I want to scale my fullscreen application so that the images, buttons, text, etc appear the same size regardless of the screen resolution.

You mentioned that you solved this issue in WPF with just a couple of lines of code - would you be able to show exactly how you did this?