Software development

1. Software development

2. Chapter 6 – Advanced interface design

3. 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

4. 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

5. Sample interface

6. 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

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

8. 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 sub-unit

9. Windows 8 grid

10. 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

11. 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

12. Use of screen space and dpi values • As a developer you may choose whether you want to display on high-resolution displays • 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

13. 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.

14. 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

15. 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

16. Events in Visual Studio Click the lightning icon to view the chosen component's events

17. 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

18. Application bar

19. 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

20. Example <Page.BottomAppBar> <AppBar x:Name="alapalkki"> <Grid> <StackPanelGrid.Column="1“ HorizontalAlignment="Right“ Orientation="Horizontal"> <AppBarButtonHorizontalAlignment="Left“ Label="Päivitä" VerticalAlignment="Top" Icon="Refresh"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar>

21. 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

22. Components 1/2

23. Components 2/2

24. 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

25. Example

26. 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.";

27. Assignments • Find out what is the most popular screen resolution for Windows 8 devices. • 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? • Read the Windows 8 interface guidelines and find out what "adaptive layout" means.

28. 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).

29. 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.