  
|
Here is a compact yet deep technical
exploration of how to use Windows 8
Metro end-user interface (introduced by Windows Phone 7).
Related topics elsewhere on this same website (WilsonMar.com):
|
|
|
UX: Touch or Mouse or Keyboard
This table summarizes the various ways to do the same thing.
Winkey + Z means hold down the Windows key 
and press the Z key on the keyboard.
| Interaction
| Touch
| Mouse
| Physical Keyboard
|
|---|
| Launch/activate
| Tap
| Left-click
| Enter
|
| Select
| Swipe opposite scrolling direction
| Right-click
| Space bar
|
| Show charm Start
| -
| -
| Winkey + C
|
| Show charm Share
| -
| -
| Winkey + H (for the h in share)
|
| Show Desktop
| -
| -
| Winkey + M or D
|
| Show charm Devices
| -
| -
| Winkey + K
|
| Show charm Settings
| -
| -
| Winkey + I (for Info?)
|
| Lock screen
| -
| -
| Winkey + L
|
| Show app bar
| Edgy swipe from top or bottom
| Right-click
| Winkey + Z (as in Zorro's mask)
|
| Show Desktop
| -
| -
| Winkey + D
|
| Show Files
| -
| -
| Winkey + F
|
| Project to a screen
| -
| -
| Winkey + P
|
| All Apps (small icons)
| -
| -
| Winkey + Q (for Quartermaster, the James Bond gadget guy)
|
| Run
| -
| -
| Winkey + R
|
| Usability
| -
| -
| Winkey + U
|
| Control Panel menu
| -
| -
| Winkey + X
|
| Switch keyboard language
| -
| -
| Winkey + space bar
|
| Context menu
| Tap on selected text or press and hold (in a few cases)
| Right-click
| Context menu key
|
| Scrolling short distance
| Slide
| Scroll bar thumb, arrow buttons, scroll wheel, mouse & move on 2D canvases
| Arrow keys
|
| Scrolling long distance
| Slide + inertia
| Scroll bar: click in track, move thumb, scroll wheel, push scrolling (if supported)
| Page up or down
|
| More information / learn
| Hold
| Hove & time threshold
| Move focus rectangle & time threshold
|
| Interacton feedback
| Touch visualizations
| Cursor movemen and changes
| Focus rectangles
|
| Move focus
| N/A
| N/A
| Arrow keys, tab
|
| Rearrange/ drag & drop
| Swipe opposite scrolling direction past threshold
| Mouse down & move
| Use cut & paste
|
| Zooming
| Pinch
| Scroll wheel (2D canvas) or ctrl & scroll wheel or UI command
| Ctrl & +/-
|
| Rotate
| Rotate
| UI command, or shift+ctrl+scrollwheel
| Ctrl & ,/.
|
| Place caret / select text
| Tap / tap and drag caret
| Click / double click / down & move
| Arrow keys / shift + arrow / ctrl + arrow (+ standard keyboard navigation)
|
WATCH:
Mouse and Keyboard intro from Microsoft.
Landing/Splash Screen
Power up a PC with Windows 8.
When the computer boots up, the Windows 8 splash landing screen appears (faster than with Windows 7).
UX:
To return to this landing page from any screen,
hold down the Windows key
and press L (for Landing or Lock).
The Start screen replaces the desktop in previous version of Windows.
BLAH:
Many users are disturbed because they cannot get to that old orb even though
internally Windows desktop programs are still there.
By default, icons on the bottom of the screen shows the status of networks,
power, and unread emails.
Up to 5 such widgets can be user-selected to show quick status (an icon and a count).
BLAH:
Wish the time zone would display.
TO DO:
Lock screen apps sample
describes programming of this.
QUESTION:
Can one turn the full-screen landing screen to a picture frame?
DO THIS:
Press any key to advance from this screen, usually to the login screen.
Lock Screen
The Lock screen does not appear if the default user was setup with no password.
To login using picture password by drawing lines and circles on parts of the screen,
see
Preview.
DO THIS:
Click icons at the bottom of the lock screen to select Accessibility features
or default language. Click the power button to shut down or restart the machine.
On WinPhone 8, 3rd party custom apps can be a lock screen image provider (for lock screen personalization).
The lock screen can be personalized with a
lock screen provider app.
See
Change Lock Screen Image using Js.
Screen
Resolution
| Lock
Image
| Aspect
Ratio
| Note
|
|---|
| WVGA (480 x 800)
| 288 x 288
| 15:9
| The only one Windows Phone OS 7.1 supports
|
| HD720p (720 x 1280)
| 432 x 432
| 15:9
| New for Windows Phone 8
|
| WXGA (768 x 1280)
| 460 x 460
| 16:9
| New for Windows Phone 8
|
DO THIS:
Reveal the password by clicking and hold on the eye icon.
DO THIS:
Click the right arrow to submit the password.
Start Screen Tour
The screen labeled Start (at the upper right corner)
borrows from the square and flat Metro (Metropolitan) design
first seen on Microsoft Windows Phone 7. Its design is inspired by
SEARCH:
International Typographic Style.
TIP:
With so many icons, many find it best to type the name of the program (such as paint),
then selecting the search result.
Each tile represents an app installed
For the full list of all apps installed (represented by smaller 30x30 pixel icons),
right-click on an empty portion of the Start screen
(not on a tile) and press Enter for All Apps.
To manage whether an app is
pinned on the Start screen or not,
right-click on that tile and click on an action in the pop-up.
Press Esc (Escape) to dismiss the option pop-up.
DO THIS:
As part of the Windows 8 "hub and spoke" design,
to get back to the Start screen from anywhere, press the Windows key
on the keyboard
or mouse to the very lowest-left-most corner of the screen,
where the Windows orb used to be back in Windows 7 and before.
Start Screen Navigation Tricks
DO THIS:
As part of the Windows 8 "hub and spoke" design,
to get back to the Start screen from anywhere, press the Windows key
on the keyboard.
A big shift Windows 8 introduces is having users scroll across a page rather than
down a web page.
Along these lines, transitions move in from the left and exit stage right.
DO THIS:
Press right and down arrow keys to select icons.
DO THIS:
Press PageUp and PageDown keys to move to sections.
DO THIS:
Press key End and Home for the last and first app icon.
DO THIS:
Select Internet Explorer and press Enter or double click on the icon.
Windows 8 Internet Explorer displays the URL at the bottom of the screen.
COMMENT: I wonder if other apps will follow this change in convention.
If you're at the Start screen, putting your curson to the lower left corner
gets you to the previous screen.
DO THIS:
To dismiss an application (and not have it linger in memory),
press Alt+F4 or on a tablet swipe down from the top of the screen to the bottom of the screen.
DO THIS:
Mouse to the upper-left corner of the display and
click to rotate through prior apps activated.
Move the cursor down the left edge for a list of those apps.
DO THIS:
Hold down the Alt key and press Tab repeated to rotate among active apps,
plus the old desktop (without the old Start orb).
Live Tiles
Instead of just a single static icon for each app on Apple iPhones,
Live Tiles are dynamic. Each can be one of 3 sizes and animate 3 ways (tile templates):
- Iconic is all text.
- Flip back and forth between a picture and text.
- Cycle up to 9 pictures in response to flip on click
TOOL:
Custom Tiles Maker
enables users to make their own tiles and
control the number of rows and columns that the tile consumes.
Start Screen Tile Customization
If you use Alt+Tab, you can remove from the Start screen the tile for the old Desktop.
DO THIS:
Pressing Enter invokes the app at the upper left corner.
By default, that's the email icon.
TIP:
You may want to drag the app you use most to the first position.
Unlike static icons on Apple iPhones and iPads, some Windows 8
Live Tiles present information related to each app
so you can get updates at a glance.
TIP:
App tiles which are note live (do not display text) can be made smaller.
DO THIS:
Change an app icon by right-clicking on it.
such as unpin unwanted tiles from being shown.
Several tiles can be selected for the same operation.
CAUTION:
Uninstall removes the app from the computer completely.
DO THIS:
Pin applications, contacts, and websites to Start to easily access what you use most.
You can organize, group, and name application categories in whatever way makes sense to you.
TOOL:
$4.99 Stardock's Decor8 enables Windows 8 to be decorated with custom images and colors.
Metro (Modern) UI Flat Design in Apps
Among UI designers of Microsoft Zune, Microsoft Media Center, Xbox, and Windows Phone,
Jeff Fong is named among the
100 most creative people in 2012 by Fast Company.
BLAH:
Showing a part of the text
(as followed by the Blog sample app and USA Today app)
is a brilliant way to avoid having users click "more".
But what I don't like is that to reveal the text fully one has to hunt for that tiny arrow at the lower right corner.
Why can't it scroll when I move my mouse over the partially revealed app?
DOWNLOAD:
Windows 8 UX guidelines for Windows Store apps, all in one
Win8_UXG_RTM.pdf.
System Charms
COMMENT:
Removal of navigational chrome is a simple yet revolutionary design concept.
Users who like going to full screen are most likely to like it.
Instead of an every-increasing deluge of icons screaming for attention
(Facebook me, Tweet me, Add me to Pinterest, etc.),
it's just content until....
DO THIS:
To reveal the operating system's charms menu
for Search, Share, Start, Devices, Settings by:
- Moving mouse to the upper-right corner or
- Holding down the Windows key
then press C (for Charm) or
- Swiping from the right edge in
Power-off (shutdown or Restart) is within the Settings charm.
When user select Settings, a list of setting categories should display.
Printer Setup
Press Ctrl+P.
In the Charms menu, select Devices.
Desktop Classic Shell
The familiar Desktop from previous Windows operating systems is incorporated only on
Windows 8 running on Intel chips (not Windows RT).
Executables from previous versions run on Windows 8.
BLAH: Many will likely bemoan the redefinition of Windows Start key as a home key
as vehemently as they detested it before.
Classic Shell on Windows 8
For those who can't stand the Metro interface,
change the Windows key
to reveal the Start Orb like on previous Windows versions:
DOWNLOAD AND INSTALL one of these:
Add Quick Click on Desktop
- From the Start screen, click to launch Internet Explorer.
- Specify or browse to the desired URL.
- On the address bar at the bottom, click the pin site tack icon. Select Pin to Start.
- Enter a description and click Pin to Start.
- Press Windows key
for the Start screen. Press Ctrl+Home key.
- Drag the new icon and drop on another place on the Desktop.
- Click the new icon to verify.
- Press Alt+F4 to close Internet Explorer.
Desktop Shortcut
Some users rather not have to open up the Charms menu.
To create a shortcut on the desktop:
- Click the "Unpin" icon. The item(s) disappear from the Desktop.
- Right Click the desktop and choose New, Shortcut. ???
- To define sleep, copy the following line and paste into the window that appears.
rundll32.exe powrprof.dll,SetSuspendState 0,1,0
- Select Next, then name it something like "Sleep".
- Select Finish.
- Click the shortcut on your desktop.
Enabling Quick Launch on the Desktop
Even though the Start button is gone,
the Quick Launch Toolbar from Windows 7 is still available, after being enabled
from the Desktop interface.
- Right Click on the taskbar and select "New Toolbar" from the pop-up menu
- Navigate to ... ◦C:\Users\\AppData\Roaming\Microsoft\Internet Explorer
- Highlight/Select "Quick Launch"
- Click on "Select Folder" button
- The Quick Launch toolbar is now visible on your taskbar on the desktop.
To re-position the toolbar for your own preferences:
- Right Click on the taskbar and un-check "Lock the taskbar"
- Guidebars should appear that allow you to slide the taskbar toolbars around to your desired locations
- Right Click again on the taskbar and select "Lock the tasbar" to secure your settings.
Simplify your Quick Launch taskbar to small icons/tiles by removing text and titles.
- Right Click within the Quick Launch toolbar space.
- Un-select "Show Text"
- Un-select "Show title"
User Setup
To enable Windows Store, you have to add a user in the
"Change PC settings"
Metro on Windows 7
For those who have fallen in love with the Metro screen layout, but are stuck using Windows 7,
you can install ___ on Windows 7.
Websites can use Metro layouts on CSS and HTML template from ___.
Sleep
Among the major newness with Windows 8 is that users have less control when apps
are removed from memory.
DO THIS:
Hitting the home button on the keyboard suspends the current app.
Good coding within the app means the current state is saved.
Go back to the app at the previous state from the Task Switcher.
Just like Windows Phone 7 and apps on other platforms.
By default, launching from the Start menu would drop the previous instance and
invoke a new instance of the app with default data.
Apps can opt in to the Resume Policy by a specification in the app's manifest.
Application Settings Flyout
DO THIS:
Obtain the Charms page by pressing Winkey+I (for Information).
If an app is setup properly, the Settings page appears with controls specific to the app
context. Examples:
- About This App - link to the web page describing the app
- Help
- Account
- Language
- Permissions for use of
- Personalization (of preferences for Notifications, colors, fonts, how the app works)
- Ratings UI Control
- Reviews
- Legal Notices
DO THIS:
Click within the flyout region to get scroll bars, if any.
A narrow flyout is 346 pixels.
A wide flyout is 640 pixels.
DO THIS:
Dismiss Settings by touching/clicking outside the flyout region.
To make the app's settings fly out to show a page such as the
app language selection flyout (scenario10.js)
from "Application resources and localization sample".
5-SettingsFlyout-Settings.js from "App settings sample".
// clear out the current on settings handler to ensure scenarios are atomic
WinJS.Application.onsettings = null;
function scenario5AddSettingsFlyout() {
In custom.js:
function handleAltLeft(evt) is called to dismiss Alt+Left while in the control.
function handleBackspace(evt) is called to dismiss the backspace key or alt left arrow while in the control.
In CSS:
.win-settingsflyout .win-header { background-color: #00b2f0; }
/* Make the back button arrow match the header color when pressed */
.win-header .win-backbutton:hover:active {color: #00b2f0;}
/* Settings flyout border color follows the header background color with a 20% darkening*/
/* The darkening is achieved by using 80% of the original value */
.win-settingsflyout {border-color: #008ec0;}
Techrepublic
notes that the Apps screen can be instantly accessed
by a shortcut specifying a particular CLSID key in the Windows 8 registry.
The shortcut pinned to the taskbar, changed its icon,
moved it to the left edge of the taskbar
Ratings UI Control
Rating Lets the user rate an item.
SAMPLE APP: HTML rating control sample
Portions ©Copyright 1996-2014 Wilson Mar. All rights reserved. | Privacy Policy |
Last updated
Windows 8 Usage Basics
