The new concept design Microsoft Metro and the user interface of Windows Phone 7
The new interface Metro – one of the key features of the mobile OS Wndows Phone 7. But not only that it has become clear that the organization will use the user interface for all Microsoft products, including flagship Windows 8, which goes to market next year. So the interface Metro in any case there will be a long time, and should get to know him more. So far – the example of the mobile operating system Windows Phone 7.
Immediately remind you that right now on the market came the global update Windows Phone 7.5 Mango, in which the system adds many interesting new features. All the innovations we consider in detail in the next article, but some changes in the user interface will be marked here already.
What is the Metro, why do you need, etc.
Metro – a new ‘design language Microsoft. A new concept, designed to change the logic of constructing and operating system and applications, as well as the schema of user interaction and the electronic device.
The basic principles of construction and appearance were largely borrowed from the information systems of transport nodes. For inscriptions and graphic elements of these systems have been under the specific requirements: very high readability and visual perceptibility of information, lack of extra distractions, clean and clear view of all the external elements.
Ideally, one should quickly and clearly to perceive all the information contained in them, as well as a clear and unambiguous guidance on the necessary action. But not only that appearance should be pleasant, neat and leave a good impression to the user.
Representatives of Microsoft for over a year to actively talk about the concept and features of the construction of the new interface. Judging by the fact that the sets of slides and presentations from a variety of professionals are very similar, this information is carefully prepared and verified by the PR-departments. On the one hand, in the modern world it is quite natural. On the other – students lose a vital connection and emotional contact with the authors, with the creators. See a copy, not original. With that trying to deal with copyright live arrivals.
Thus, the style of Metro. Microsoft calls it ‘our new design language.’
For the style of Metro developed its own principles that guided Microsoft to create its own operating system and applications. The same principles guided the company encourages and creators of third-party applications.
The main principle of the system is to focus on user content. After working with an electronic device or the user wants to access their data, or fast, convenient and minimally distracting from the other cases to solve a problem of his. Therefore, the role of the interface is reduced to a quick and convenient to user where he can do what he wanted. Interface loses its independent meaning ‘face’ of the device, becoming simply a pointer to the correct path to the user function. Following this logic, Microsoft calls the most ‘clean’ interface: remove all minor and decorative elements, which only distract the user, leaving only the most important thing. This should facilitate user navigation and perception of information.
Of course, the interface should be pleasing to look at and leave a good impression. However, its beauty should not come at the expense of simplicity, speed, and informative. That’s why designers still are not many visual tools for working. However, Microsoft believes that the available means possible to achieve the desired results. First, you should pay particular attention to fonts and font attributes. The size, style and location of signs of themselves can pretty much tell. Sometimes a visual impression of the inscription can be almost more than the informational component – and these must be used.
For Windows Phone 7, Microsoft has developed a special font family Segoe.
Particular attention is paid to the development of font readability. As a result, the user can recognize the label, even with a cursory glance, do not grasp the meaning of the letters. In addition, the font remains readable even in very small inscriptions. Finally, Microsoft and this emphasizes the font turned out just visually beautiful.
The second important priority: the interface must be dynamic and forward-moving. It is difficult to explain in words, but the idea is that the construction and appearance of the interface should encourage the user to move forward, to show him what’s next is even more opportunities and more information. As an example, the well-known (and the calling of our time, a lot of disputes) line interface, when the right side of the screen appears a piece of the title the next screen.
The concept of Metro very important role assigned to the animation interface. She should ‘divert and entertain the user.’ Beautifully animated interface with aligned interesting transitions and effects by itself forms a very good impression of working with him. Animation makes the interface alive. Microsoft strongly encourages strengthen this impression. For example, active elements and buttons should respond to the press: or fluctuate. The transition from screen to screen must be carried out with an animated effect (by the way, the creators of the programs, even central, it is often ignored).
The system provides so many different, sometimes very interesting types of animation. For example, the mail client in the transition from viewing the folder ‘Inbox’ to view a particular message sender name and subject line does not go away from the screen, but as a ‘fly’ on a new screen. When you click on ‘Send’ letter is reduced and flies away to the upper bound of the screen. By the way, the animation system is implemented sredstami, ie, before the developers had to invent and create all the effects of hand, but now you just select what kind of animation you want to see. This at times makes life easier for developers, although it makes it almost impossible to custom scenarios.
Assigned to the animation, and other tasks. Animated transitions mask the time it takes the system to process user commands. Ideally, when properly constructed animation, the user generally will not notice that the application ‘idea.’ Thanks to the beautiful animation, he did not note that the transition from one page to another took some time.
Microsoft urges to give a copy of the virtual interface objects and effects of the real world, instead of more active use of the opportunities that presents a virtual space. Today’s menu is almost always built on icons, ie, static images, which allow only to find and run the application. No, the icon may be relief images from the top ‘notification’, but do not judge on the fridge magnets. In general, the icon is a kind of application ID, but it is static. Therefore, developers are committed to create the most attractive application icon, typically styled button (with simulated three-dimensional, etc.). Visual component to them decisive.
Infographic approach is that the menu should not only provide launch the application, but in and of itself provide the necessary information pertaining to this application: current status, the presence of new notifications and other information. Thus, the main menu for the user is not just a launcher, and full information display, which at a glance he can grab the new developments in the system and respond quickly.
In this brief description of the ideology of the interface we have used the Metro Council and Microsoft dropped all secondary elements, focusing on the essentials. Those who are interested in the principles of construction and Metro wants to know more about them, we offer a review with a report about the lecture Megan Donahue, one of the creators of the concept Metro, where she was a very detailed account of the principles of design, the approaches that have developed for themselves developers Windows Phone 7, gives advice to application developers, etc.
And meanwhile, we proceed to a description of what happened – that is, to the appearance of the interface of Windows Phone 7 that it is … and what is not.
Building an interface of Windows Phone 7: Basic menu items
The system has three ‘main screen’: lock screen is basically the main menu with tiles (which are traditionally shown on any of the presentations), which provides quick access to the necessary functions of the system, and the general application menu (the list of all applications and functions of a smartphone). Let’s see what each of them is individually.
Lock screen appears when the smartphone comes out of sleep mode, it is the first screen the user sees. Only for this screen, you can set a background image (wallpaper).
On the lock screen can show the status bar, and an information panel, where the menu and notice the volume control on them will be discussed below.
By the way, in version 7.5 Mango player control buttons moved from the dashboard directly to the screen lock. And they work directly with him. I personally think this decision weird: on the lock screen should be active elements, otherwise it will not lock screen.
To unlock the smartphone must pull up the screen. Incidentally, the decision is ambiguous, since pulling out his smartphone, sometimes you do it accidentally, and then you can have something accidentally click on the menu (this is especially true when an incoming call). When you unlock the screen lock up and leave open a main menu, or application, which was opened before the smartphone went to sleep.
You can set a password, then unlock will be made only after its introduction.
Developers of Windows Phone 7 talked about such interesting detail that characterizes the ease of use. Although the wallpaper looks quite normal, actually picture a little dark, so the font and icons on it looked sharper and easier to read.
To turn off the smartphone, press and hold the power button. After this wallpaper pripodnimutsya, and to turn off the phone, they should be pulled back down.
Main Menu – is a central element of the user interface of Windows Phone 7. It consists of large tiles (tiles). This menu can be seen in any advertising of the new operating systems and smartphones with it.
Revolutionary interface, according to Microsoft, is that each element can combine several functions: just show the user the information he needs and provide access to content.
Thus, the first feature of tile is that it gives the user some necessary information. Or, at worst, entertainment – such as a hub «People», the icon that shows thumbnail pictures from Facebook. The new information is downloaded to your phone automatically, ie you do not need to push this ‘Update’. This organization allows a glance that your system is new and what should be addressed.
Access to create a ‘live’ tiles from third-party developers appeared only in the WP 7.5 (Mango). There’s also implemented technology revolution: Tile can turn, and can be programmed background (image, icon, etc.) and informational events for both the tile – they may be different. Incidentally, Mango has another interesting feature: each application can have several tiles that display different information from the application, and you can choose to display one tile that you need, or to display multiple.
Second, the tile to access the content. Moreover, its functionality is not limited to running the program: Tile can do anything – to manage your smartphone, launch programs, open directly to the contact information (where you can either choose to call any other method of communication) or web page. In version 7.5 Mango is possible to create some tiles for a single application, and now the user can choose the most interesting feature of those that provides an application. In addition, different tiles can lead to different ‘parts’ of the program.
The existence and importance of the information component of the tile has led to significant changes in the interface. In the case of the interface through the icons do reasonably smaller icon size (give it a good one could well get his finger) – it is so more fit on the screen elements. However, Windows Phone 7 other priorities: the readability of information on the tile and the usability of the tiles. Therefore, tiles are much larger icons (in comparison with the same Windows Mobile 6.5 or competing platforms). This gives more space for the information (or graphics), but also because they are much more convenient to use (simply click on the tile, because it is larger). In principle, for a smartphone with a diagonal screen size of 3.7-inch tiles for me personally close to optimal: the information is read at startup and do not have to aim, and no doubt, there I got. With the small icons often get the opposite: to distinguish from a distance and difficult, and sometimes does not get his finger.
In addition, you can easily configure the main menu to fit your current needs, introducing here and placing the tiles on your own. For example, if you’re working on a project, you can make to the main menu, everything that belongs to him: Contact counterparts and colleagues in the project, the right applications, websites, etc. And everything that you need constant access under the project will be available directly from the menu. After completion of the project when they are needed, they can be easily removed therefrom, freeing space for other useful features. Of course, there is nothing stopping once to configure the smartphone to your needs and forget about the settings, but the organization of the menu allows for much greater flexibility.
As already mentioned, the main feature is the ability to tile dynamically update the content – of course, if you have that update. For example, the tile will show the phone number of missed calls, and tile SMS – number of new messages, as well as tile mail. By the way, changing the SMS icon itself: a simple emoticon, if no new messages, smile, if they are anywhere from one to five, and if it becomes a lot of unread SMS, it is replaced by the astonished faces. Tile contact will show you his name, photograph (if the smartphone was able to get it out of Facebook or if it is in the notebook), but if you have received from the subscriber’s message, and the tile will reflect this. Tile picture as your background makes one of the photos in an album. On tile calendar appears information about upcoming events. In general, the tiles can animate a variety of ways: either to make useful information from the application, or do something fun.
In real life, it is informative tiles are easy: at first glance it is clear who to call and write, ie, to assess the state of the system is really very simple. But it should be noted that some users may annoy melteshenie constant in the main menu: the picture is changing not only the events, but also for fun (such as name changes to the photo of the contact, and vice versa). Then turn over one tile, then another … The first time it’s very cool, but eventually get bored, but when it is already pall – replace or somehow influence the system will not work.
Finally, the third element of the interface – the application menu. This is a general list of everything that is on the phone: here are the standard applications and system utilities and configuration utilities, here come all the installed applications. This is the usual linear list sorted alphabetically, ie, all dumped into the pile. It is impossible to sort out some other way, change the type or sequence, etc. Therefore, if you choose the application is active, it quickly swells, and it becomes uncomfortable to use.
In Mango it added the ability to search (the second icon in the left margin). Search works much the same way as in Windows 7: you have to type a few letters from the application. Although Windows 7 the way I liked the search, but the phone is more convenient visual navigation. The search is transferred only when completely littered the main menu.
Finally, when the application becomes much, there is the same group, as in a notebook. Applications are grouped by the first letter of the name now appears in front of a group of single tile with the letter. By clicking on the letter, you get a complete alphabet, and can move to the desired letter or group of applications.
It is also worth noting that this list does not appear the game. They are only available within the hub Xbox Live. This hub is generally something like state within the state, with its rules, its own (and very different) interface, etc. However, in version 7.5 of its appearance changed so it does not stand out as much.
Additional elements of
We have considered the basic user interface components of Windows Phone 7. It would seem that this is complete. However, the interface of any operating system there are many other items that users often do not perceive consciously, because they arose independently and not by the will of the user. That’s about it right now, we’ll talk.
For example, notice: it is the individual windows that appear over the desktop window. Their appearance, behavior and relationship with the main working window – a very important moment in the interaction of user and device.
Or, for example, the window of an incoming call. This is such an obvious thing that many people simply do not perceive it as a menu item. However, this is the same full-fledged components of the system, their organization and operation depend largely on user experience. Let’s briefly look at them.
In WP7 is the status bar. It displays the time, received signal, the state of Wi-Fi, Bluetooth, etc. It also, incidentally, a triangle appears, if you are in roaming. Of course, the panel with similar functionality available on any OS, but in WP7 it is radically different from what it was before.
Firstly, this panel is not on the screen continually: it appears from the upper edge of the screen when you in this place – and a few seconds ago is hiding. Constantly on the screen are just watches, but the authors of the third-party applications can specify that the clock on the screen and disappeared. Megan Donahue, in a speech explained the logic of such a decision: I would like to watch users to see all the time – have the same orientation in time. All other information is unimportant – what is constantly aware of the presence of a signal from your network or Wi-Fi, if it works? And if does not work, it is enough to touch the top of the screen to check the status of the system. The same applies to life: so far so good, not worth worrying about the level of the charge, and when the battery is nearing the end of the phone it will notify the owner.