“The Floppy Disk icon means “Save” for a whole generation of people who have never seen one.” — Whether it be with web design or user interface design, if you are using iconography to communicate a specific task that has no relevant context to the period you are in then you are not doing your job properly and just rehashing what other designers are doing without taking the time to consider the overall UX. The floppy disk icon needs to go!
(Source: hanselman.com, via spjpgrd)
Principles of User Interface Design -
“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.” - Paul Rand
(Source: brunomarinho)
[video]
This Is How Design Works: User Interface Design -
We're in an icon-sharpness limbo -
With the rise of Retina displays people are looking for resolution independent alternatives to PNG icons. Some fell in love with font-icons, some are shouting “SVG”. But I’m sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist. Let’s take a closer look at our options:
Icon fonts are awesome, but..
[video]
As I have spent a few weeks using Windows 8 on both my netbook and my main desktop computer I thought it would be a good idea to go over what has changed.
The biggest and most noticeable change coming from previous Windows versions is that of the new ‘Metro’ Windows Runtime (WinRT) environment. From my understanding this is not merely a touch-based shell that sits on top of Windows but rather a core level environment that provides four new distinct paradigms for Windows users: a fullscreen immersive app experience, side-by-side app snapping, pinned live tiles and a touch-centric metro-inspired user interface.
By grouping the live tiles and changing certain properties like tile size and position I was able to organise my start screen to look more uniform and clean by de-cluttering the unnecessary apps that plagued the start screen upon first install. As you can see you are able to pin not only metro apps but legacy shortcuts as well. (each time you install a legacy app the shortcuts appear at the end of the start screen just like the start menu)
This is the new settings page where users can customise and control certain new features which are provided in Windows 8 such as the lock screen which appears when you are aren’t logged into Windows as well as changing your theme which consists of a background pattern and a selection of fixed colour variants.
One of the great benifits of using Windows 8 is that it is integrated with Microsoft’s cloud storage solution SkyDrive, which means that if you are logged into Windows using a Microsoft ID (such as a Live account) all your apps, app settings and legacy explorer configurations are saved to the cloud which will enable you to sync them to multiple devices. So far this seems to work well and syncing is surprisingly fast.
What is now known as the legacy desktop environment is essentially Windows 7, so little has changed but that is not necessarily a bad thing as Windows 7 is still a very solid OS. However one of the main differences you will instantly notice is that Windows Explorer not only looks different but that file management performance has greatly improved.
The explorer ribbon in it’s current implementation is still quite bad, though I must confess as a power-user one feature I do like is the ability to pin any explorer option found in the ribbon to the ‘Quick Access Toolbar’ which is displayed on the Aero glass part of the window. For me every folder needs to be displayed and structured a certain way i.e: grouping files by file-type and then sorting by date modified or name, so I have pinned the ‘View’ and ‘Group by’ options so now I can quickly change the folder properties a lot more easily.
Compact Windows explorer list view
This may or may not be a new feature but is something I came across. If you resize a window right down to it’s smallest width the navigation pane disappears so that you are left with a list of files with the folder. This is great because if you do what I do and ‘hide file names’ for photos in a large photoset for example, what you are left with is a nice orderly list of photos with no extra chrome which makes viewing files much cleaner. Another great option for viewing items in this compact list view is ‘Content’ which you can see in the photo above. This would be also be a nice way to view files if you are multitasking and don’t want to take up a lot of screen space if say you’re using a netbook, just snap the folder to the side where you can scroll through the list of files or photos without cluttering the desktop space with unnecessary explorer chrome.
Detailed Pane moved
Another change to explorer which I particularly like is that the detailed pane is no longer at the bottom of the window which I always found to take up too much space but instead is now placed in the same position as where the preview pane exists, to the right side of the window. For power-users this will be useful, especially for photographers as the camera’s EXIF data is more prominently displayed.
Much like the snap function in Windows 7 (although this works differently) Windows 8 allows users to snap apps to either side of the screen for multitasking purposes. Essentially developers provide two layouts for their apps, one for fullscreen viewing and another for viewing in snapped mode. In the screenshot above I have opened to the left the Windows Store where I am viewing an app and to the right I have snapped another metro app which is Music - which by the way is poorly designed and thought out to the extent that the app is rendered useless.
You can also use the legacy desktop while viewing a metro app. In this instance I am showing Adobe Photoshop running beside the People app displaying recent tweets from The Verge. (Unfortunately there are no social networking apps in the store as of yet but in a ideal situation when more apps are available I would have a metro version of Twitter or a news feed snapped to the side)
So what do I make of Windows 8 Consumer Preview? It is hard to say right now, as a designer I feel compelled to point out all the UX inconsistencies (which I will be doing in a later article) but I do realise that this is only a beta release and that I am assuming many features are yet to be revealed so I am reserving complete judgement till later builds are made available.
The main aspect that will determine if Windows 8 is a success on an UX level is if Microsoft is able to offer a great selection of extremely high quality apps that are not generic in the sense that apps do not merely stick to the default layout and controls (which so far all Windows 8 apps have done) but that they should make use of the APIs to create some innovative and creative interactive experience. Judging by what I have seen so far with Windows Phone and it’s marketplace I am not so optimistic. Will HTML5 be enough to convince developers to build these high quality apps? I’m not so sure.
[video]
[video]
[video]
[video]
iOS ‘86 by Anton Repponen
Despite this being a somewhat humorous conceptual design piece in which the iPhone user interface is swapped with that of the Macintosh’s low-fi pixel-based iconography. I have to admit that a part of me actually likes the flat 2D style, if the icons were in full colour it would look surprisingly clean and stylish.