Software development
Chapter 6 – Advanced interface
design
Contents
•
•
•
•
•
•
❷❸
What makes a good Windows 8 interface?
The essentials of Windows 8 applications
Grid system and pixels
Interface component templates
Assignments
Questions and answers
What is a good
Windows 8 interface like?
• A good interface consists of several details, it
is important to be diligent
• The most essential question can be asked in
one sentence: can the interface be learned
and used effortlessly?
• Windows 8 applications follow the guidelines
of minimalism in both interface design and
content
Sample interface
Windows 8 User Experience
Guidelines
• Microsoft has gethered the interface
guidelines for Windows 8 applications into the
300-page book ”Windows 8 User Experience
Guidelines”
• These instructions are primarily for normal
XAML or utility applications
–
The parts dealing with the usability of applications
are also important in games
The essentials of Windows 8
applications
• You must know some essential facts about
interface design in order to design good,
functioning applications
• We will now talk about matters such as screen
resolution, layout, interface controls, and
animations
Grid system
• Windows 8 applications can be run on different
kinds of devices from traditional desktop PCs to
small tablets
• The smallest visible unit on screen is the pixel,
but for interface design this unit is far too small
• Windows 8 applications use a grid systemwhich
divides the screen into units and again into subunit
Windows 8 grid
Unit sizes
• Unit
–
Size 20 × 20 pixels
• Sub-unit
–
–
Size 5 × 5 pixels
One unit holds 4 × 4 = 16 sub-units
• Pixel
–
Physical pixel on screen, size depends on used
device
Resolutions on Windows 8 devices
• The smallest supported resolution for Windows 8
applications in 1366 x 768 pixels
–
This screen holds 63 × 38 units
• The sharpest modern resolutions are at the 4K level
–
This kind of screen is typically 3840 × 2160 pixels, which means
the screen can hold 4 Full HD videos at once
• The most typical resolution in a Windows 8 device is Full
HD resolution or 1920 × 1080 pixels
• You should also be familiar with the concept of dpi
–
–
Dots per inch
The higher the dpi value, the sharper the display
Use of screen space and dpi values
• As a developer you may choose whether you
want to display on high-resolution displays
1.
2.
more information (such as news headlines), or
to keep the number of visible elements the same
and only make them larger
• Windows 8 is able to automatically choose the
graphics based on the display's dpi value
–
This way sharper displays can display higher quality
images without changing the program code
Designing touch interfaces
• Windows 8 applications should be designed to
be primarily used by touch (the touch first
principle)
• Once your application functions well with
touch control, it is also immediately usable on
other input devices
–
Typically a mouse-keyboard combo or, in some
devices, a stylus.
Event driven applications
• Windows 8 applications are event driven
• This means that the Windows operating
systems informs applications of notable
changes through events
–
Events include touching the screen, pressing a key,
or turning the device from a vertical position to
horizontal
Event handler
• An event handler can be programmed for all
these events
• Handler will run a piece of code depending on
the type of event
• Event handlers can be defined in Visual
Studio's Properties window
Events in Visual Studio
Click the
lightning icon
to view the
chosen
component's
events
Displaying commands
• The minimalistic design of Windows 8 applications
means that they may not have any visible command
controls
–
all screen space is used for content
• Commands are essential, however, and depending on
the application there may be dozens of them
• Windows 8 offers several different options for
displaying commands
–
The most widely used method is to use an application bar
Application bar
Application bar's functionality
• Application bars are horizontal areas that are displayed
when the user swipes at a corner of the screen
–
The user can also right-click on top of the application, or
press the keyboard shortcut Windows+Z.
• You can position the application bar either at the top or
bottom of the screen
–
–
The bottom is the more typical choice, and the most
common commands should be placed there
The application bar commands are placed either at the left
of right side of the bar, but never in the middle to make
two-handed tablet use easier
Example
<Page.BottomAppBar>
<AppBar x:Name="alapalkki">
<Grid>
<StackPanel Grid.Column="1“
HorizontalAlignment="Right“
Orientation="Horizontal">
<AppBarButton HorizontalAlignment="Left“
Label="Päivitä"
VerticalAlignment="Top" Icon="Refresh"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Interface component templates
• There are around 40 component templates for
Windows 8 applications.
–
All of them can be found in Visual Studio's Toolbox
• A simple application can manage with about a
dozen different components
–
The most common components will now be listed
• Remember that components can be added on
screen while the application is being run
Components 1/2
Component
Picture
Description
TextBlock
This components displays text in the chosen font and
size. The displayed text is defined in the component's
Text field. These components are often also known as
Labels.
TextBox
The TextBox components allows the user to input text.
The code can easily read the text by using the
component's Text property.
Button
As their name reveals, Button components create
buttons and switches for different situations. By default
these buttons are rectangular, but for example in the
application bar they are circular. Buttons are used also on
message dialogs.
CheckBox
CheckBox lets the user make yes-or-no-type decisions.
This component is at its best when there are at most a
few choices left.
RadioButton
RadioButton works like CheckBox, but allows the user to
choose only one option out of several, whereas the
CheckBox allows for multiple choices.
Components 2/2
ComboBox
The ComboBox allows the user to choose one out of
several options. When compared to RadioButton,
ComboBox has the advantage of taking much less space.
DatePicker
DatePicker lets the user easily pick a date. It's better to
use DatePicker to request the user to input a date, instead
of using TextBox.
TimePicker
TimePicker works like DatePicker, but instead of a date it
asks for a time.
Slider
Slider is a useful tool for letting the user pick a value from
a preset range, for example a percentage from zero to
hundred. Slider may be inaccurate for some situations,
though, so when great precision is needed, it better to
request that the value be input as numbers.
ToggleSwitch
ToggleSwitch is suitable for situations where a feature
needs to be switched on or off. The user will assume that
the new feature is switched on immediately, such as when
ToggleSwitch is used to turn a tablet's WiFi connection on.
Required screen space
• Primarily each Windows 8 application fills the
whole screen
–
The user may, if she so wishes, move an application
aside so that two or more applications can fit on the
screen simultaneously
• Windows 8.1 is able to display four simultaneous
applications side by side
–
Each application must have at least 320 pixels of
horizontal space
Example
In program code
• You can easily find out the available screen space by
using the program code
• For example like this: (wirth; heigth =
Bounds.Height):
int width =
(int)Window.Current.Bounds.Width;
screenSizeTextBlock.Text =
"Current screen width is " +
width + " pixels.";
Assignments
1. Find out what is the most popular screen
resolution for Windows 8 devices.
2. Could all commercially available Windows 8
application be created using only Visual Studio's
interface components? If third-party components
are needed, where can they be acquired from?
3. Read the Windows 8 interface guidelines and find
out what "adaptive layout" means.
Questions and answers 1
Visual Studio has several available interface components. How do I know
which one I should use?
• Each component has a certain use. For example, yes-or-no choices can be
displayed with three different components but depending on the
situation, only one them will be a suitable choice.
• However, the choice is not always made between right and wrong, but
rather good and better. The best way to get to know the component
guidelines is to read Microsoft's recommendation. They can be found in
the Windows 8 User Experience Guidelines (see pic. 6.2).
• However, the choice is not always made between right and wrong, but
rather good and better. The best way to get to know the component
guidelines is to read Microsoft's recommendation. They can be found in
the Windows 8 User Experience Guidelines (see pic. 6.2).
Questions and answers 2
I would like to test my application on different devices but I only
have one laptop. How can I test my application without having to buy
all different kinds of Windows 8 devices?
• The easiest way to test your application's functions on, for example,
different screen resolutions is to use the simulator supplied with
Visual Studio.
• You can use this simulator to try different resolutions and screen
positions (horizontal or vertical) for tablets.
• Sometimes you may get the chance to test your application on an
actual device. Because of this you should keep an eye on
Microsoft's events in Finland, as they arrange special workshops
where your applications can be tested on different devices.