Posts tagged microsoft

gregmelander: SUBWAY SYSTEM Helvetica and the New York City Subway System is a book describing one of the great parts of design history. designcloud The original inspiration behind the Metro Design Language and Principles behind Windows Phone, Windows 8 and Xbox 360.

gregmelander:

SUBWAY SYSTEM

Helvetica and the New York City Subway System is a book describing one of the great parts of design history. designcloud

The original inspiration behind the Metro Design Language and Principles behind Windows Phone, Windows 8 and Xbox 360.

designcloud

Redesign: Windows Phone Marketplace UX

The Windows Phone marketplace was the first website that Microsoft released that had a feel of Metro to it. It’s a dramatic shift from how Microsoft were previously designing their web pages. Text, DIVs and graphic elements have better spacing, heading fonts are better (but far from perfect) and because the page is cleaner looking it is a lot easier to navigate and find where you are.

The Problem? See below.

I highlighted the most prominent issues regarding the layout and design. There are certain aspects to the page that are either unnecessary or could be improved. Such as the way users navigation through app screenshots in a way that isn’t generically copying Android’s marketplace and improves upon what Apple has done with their basic horizontal scrolling. (that’s so 2007)


Windows Phone Marketplace
Disclaimer: All images used are for illustration purposes. No copyright infringement intended.

Compare the two images and you will notice a dramatic improvement. Elements on the page are correctly sized and positioned. And the main featured element on the page becomes the most important section, the screenshots instead of the tile icon which is still important but not so much that it takes away from the reason users are on the page in the first place, TO SEE THE APP!

How users navigate app screenshots


Instead of the generic grid of portrait images, users are presented with a modern stylish looking Windows Phone (HTC Titan) that immediately makes the Windows Phone marketplace stand out as unique featuring it’s own product with pride as the main interaction element.

Using the Metro Panorama UX:
What better way to illustrate the beauty of Windows Phone than to make use of the panorama controls as a slideshow. This can easily be done in purely HTML5 or as a JQuery script. (but should not be in Silverlight which is not supported on mobile devices)

* Notice something unique? The screenshots are displayed in their correct orientation and not forced in portrait. I imagine Microsoft uses some form of CMS system to input app data into the marketplace. Developers should be able to select whether their app should be displayed in portrait or landscape when submitting their app. The CMS will then use two different sets of CSS and asset files as templates so the CMS can make the adequate changes to reflect the orientation change. This solves the problem of a developer manually making the changes for each app.

Support for Video playback
Developers will have the option to feature a H.264 HTML5 video (Silverlight or Flash as a fall-back if they’re using an old browser) of their app in action that will play in-line inside the Windows Phone. Videos tend to attract more attention because by nature humans are visual so by creating more engagement with users they are more likely to take up a ‘call to action’ such as sharing, downloading or purchasing an app. (Videos must be in sizzle-reel style showing real-time playback through capture software and not a video captured through a camera with narration. This is to maintain continuity with a high-end level of quality)


Navigation controls
Users will navigate screenshots by either:

  • Clicking and dragging/grabbing the far right or left of a screen and moving either way
  • On a touch device? Swipe left or right because the slideshow would be optimised for HTML5, CSS3 and jQuery instead of SL or Flash.
  • Use the directional keys on your keyboard

There are rumours circulating that Microsoft may merge the Windows Phone marketplace inside the Windows Store and so my design proposal would by default be defunct. However I still believe that it is important that they pay more attention to little details as the UX and get that Windows Phone on the page.

Productivity Future Vision by Microsoft

“We see an expanded definition of productivity where it’s not just about getting things done,” said David Jones, Microsoft’s director of envisioning. “It’s also about doing the right things, and doing them well and enjoying the process with other people in a very natural way.”

 

Windows 8 Start Screen: Boring UI or F****n’ Sweet?

On Friday Microsoft revealed a video demonstrating Windows 8 booting up from post in just 2 seconds. You can watch the video here.

What is not so exciting is Windows 8’s Start Screen which was revealed at the end of the video. Now don’t get me wrong, I am definitely liking the new design approach, it’s just that knowing Microsoft they are not going to consider every small detail when it comes to the design, even if what they release is not final code.

What I hope has been done is allow the Start Screen to be fully customisable (not merely changing tile layout). But similar to the ‘advanced’ controls under Appearances in the legacy environment, these new controls will enable options such as:

  • Adding a background image from the computer
  • Adjusting the tint level added by default onto every background (the tint is to separate the background from the tiles to avoid them conflicting visual)
  • Adjusting the opacity level to all or only specific tiles and an option to reveal tiles (revert to 100% opacity) on mouse-over or touch
  • Allowing users to select any tile colour, not just a list of pre-chosen swatches


People love Windows because of this level of personalisation. In the image below you see an example of how I drastically enhanced the UI by simply adding a background image and reducing the tile opacity. This is the small detail I referred to earlier.



I am hoping Steven Sinofsky does not let everyone down by revealing unfinished code because they have had plenty of time since AllThingsD to consider every aspect of the OS.

What are your thoughts. If you walked into a store which UI would catch your eye first and would you want to see on your computer or TV? 

Windows 8 Explorer Metro Ribbon UI with Touch First in mind

With the Microsoft BUILD conference nearing closer there has been an increased surge of excitement throughout the developer world as Steven Sinofsky, President of the Microsoft Division begins to openly discuss the in-depth look into the mechanics behind their new  ”Redesigning Windows” approach.

He recently posted an article on ‘Improvements in Windows Explorer’. Where he discusses how the Windows Explorer (They should change it to File Explorer) has developed over time and ends with introducing the new Windows 8 Explorer that features the ‘ribbon’ we see today in applications such as Microsoft Office or Live Essentials.

This GUI (a static kitchen sink) had it’s uses in feature rich applications, however Microsoft should consider developing this further and provide a “dynamic and intelligent” ribbon that is not only configurable but is smart enough to change it’s UI based on device type and window size. (i.e: icon size, text placement, number of rows and columns, spacing etc.)

Windows 8 Ribbon

As it stands this Ribbon interface is ideal for legacy applications as it provides a function but I assumed the whole idea of Windows 8 was to move away from standard Windows environment and provide something revolutionary and innovative. Like mentioned previously, a “Dynamic and Intelligent” Metro ribbon that understands the users needs.

Touch First Windows 8 Ribbon

See full Size with annotation

That is exactly what I designed in the above image to try and communicate this point. By simply borrowing the design from IE9 (chromeless window) and moving the ribbon below the navigation bar it makes everything more legible. I have also increased the spacing between elements to maximise touch performance, provided a better way to collapse the ribbon and added additional functionality [see full size image]

Microsoft needs to give Windows a personality, this is what I mean by ‘intelligence’. The Explorer should be something that is centric to the OS experience not just a boring environment that lists your files but is an all-in-one GUI - library, document viewer, control panel and so on. For example, Explorer should have an organisation tool that allows me to organise and structure my entire PC in a simple method by creating virtual groups, libraries and tags so that I wouldn’t need to create a number of actual directories just to organise my files. All it takes is a simple search to find everything without ever navigating to a folder.

These are just some ideas of what I see as a truly “Reimagining of Windows” but whatever we see at BUILD I am hoping it will truly be something innovative and different (by that I mean totally touch-first and Metro styled UI - no legacy stuff at all but completely “redesigned”).

What are your thoughts on Windows 8 so far? Do you agree with how Microsoft is presenting the Ribbon to users in it’s new operating system or should they redesign it similar to how I explained through my concept design?

Microsoft Research shows off KinectFusion

“We present KinectFusion, a system that takes live depth data from a moving depth camera and in real-time creates high-quality 3D models. The system allows the user to scan a whole room and its contents within seconds. As the space is explored, new views of the scene and objects are revealed and these are fused into a single 3D model. The system continually tracks the 6DOF pose of the camera and rapidly builds a volumetric representation of arbitrary scenes.

Our technique for tracking is directly suited to the point-based depth data of Kinect, and requires no feature extraction or feature tracking. Once the 3D pose of the camera is known, each depth measurement from the sensor can be integrated into a volumetric representation. We describe the benefits of this representation over mesh-based approaches. In particular, the representation implicitly encodes predictions of the geometry of surfaces within a scene, which can be extracted readily from the volume. As the camera moves through the scene, new depth data can be added or removed from this volumetric representation, continually refining the 3D model acquired. We describe novel GPU-based implementations for both camera tracking and surface reconstruction. These take two well-understood methods from the computer vision and graphics literature as a starting point, defining new instantiations designed specifically for parallelizable GPGPU hardware. This allows for interactive real-time rates that have not previously been demonstrated.

We demonstrate the interactive possibilities enabled when high-quality 3D models can be acquired in real-time, including: extending multi-touch interactions to arbitrary surfaces; advanced features for augmented reality; real-time physics simulations of the dynamic model; novel methods for segmentation and tracking of scanned objects.”


This is pretty amazing and definitely changes my mind with regards to Kinect and it’s uses for the Xbox 360 and PC integration. I am not a developer but this definitely seems like a game changer for augmented reality applications, the possibilities for real-time 3D rendering is limitless.

parislemon: benkessler: [Click to Enlarge] Windows v. Mac at McDonald’s. /via Josh Helfferich Perhaps the best representation of Windows vs. Mac that I’ve ever seen. And it comes via a McDonald’s pamphlet. I also love that step 1 for the Mac is to turn your AirPort on. In other words, for 99% of people, the Mac setup is actually only two steps: connect, and open a web browser.

parislemon:

benkessler:

[Click to Enlarge]

Windows v. Mac at McDonald’s.

/via Josh Helfferich

Perhaps the best representation of Windows vs. Mac that I’ve ever seen. And it comes via a McDonald’s pamphlet.

I also love that step 1 for the Mac is to turn your AirPort on. In other words, for 99% of people, the Mac setup is actually only two steps: connect, and open a web browser.

benkessler

Microsoft Homepage: How Microsoft Can Improve It’s Branding (Note: All images are edited and do not reflect the original website) I came across an article yesterday by Cory Watilo called ‘Why Microsoft has an image problem’ where he compares Microsoft.com to Apple.com. He makes the point that Microsoft is still very much stuck in their ways by continuously cramming loads of unnecessary elements on one page and using too much colour which distracts the user from focusing their attention on the important things. — I agree with most of what he says but let’s be honest, Microsoft is never going to be like Apple so they shouldn’t try to be like them but they could learn a great deal in their presentation and how they display information.I’ve always noticed this problem so wanted to see if Microsoft maybe aren’t bad at marketing and design, they just lack in direction. I’m beginning to think I am right and that’s precisely their problem.Microsoft Homepage Redesigned The photo above (click to view larger version) was created using elements all found on Microsoft’s own websites (www.zune.net, www.microsoft.com/uk, www.microsoft.com/uk/wave/home.aspx)If the images are not showing fullsize, use these links: for home, for work Microsoft homepage when user navigates to the work section. Conclusion: Microsoft is well aware that they have perhaps grown old and were in need of a re-branding to revitalise their consumer image. Their problem lies with trying to manage so many complex deep-link pages (mostly unnecessary) and product micro-sites that there is a disconnect between the design which confuses people A LOT!. There needs to be one or two universal design templates that follows through out every single page and site. This template must make use of screen real estate and support wide-screen viewing. This means using clearer heavier fonts, using HTML5, using less banner ads, using more subtle colours in your branding (not bright blue or orange) and finally force people to use your site (don’t spam your page with links to items of less importance.)

Microsoft Homepage: How Microsoft Can Improve It’s Branding

(Note: All images are edited and do not reflect the original website)

I came across an article yesterday by Cory Watilo called ‘Why Microsoft has an image problem’ where he compares Microsoft.com to Apple.com. He makes the point that Microsoft is still very much stuck in their ways by continuously cramming loads of unnecessary elements on one page and using too much colour which distracts the user from focusing their attention on the important things. — I agree with most of what he says but let’s be honest, Microsoft is never going to be like Apple so they shouldn’t try to be like them but they could learn a great deal in their presentation and how they display information.

I’ve always noticed this problem so wanted to see if Microsoft maybe aren’t bad at marketing and design, they just lack in direction. I’m beginning to think I am right and that’s precisely their problem.

Microsoft Homepage Redesigned

The photo above (click to view larger version) was created using elements all found on Microsoft’s own websites (www.zune.net, www.microsoft.com/uk, www.microsoft.com/uk/wave/home.aspx)

If the images are not showing fullsize, use these links: for home, for work


Microsoft homepage when user navigates to the work section.

Conclusion:

Microsoft is well aware that they have perhaps grown old and were in need of a re-branding to revitalise their consumer image. Their problem lies with trying to manage so many complex deep-link pages (mostly unnecessary) and product micro-sites that there is a disconnect between the design which confuses people A LOT!.

There needs to be one or two universal design templates that follows through out every single page and site. This template must make use of screen real estate and support wide-screen viewing. This means using clearer heavier fonts, using HTML5, using less banner ads, using more subtle colours in your branding (not bright blue or orange) and finally force people to use your site (don’t spam your page with links to items of less importance.)

Windows Phone 7 Mango (beta)

Quick hands-on walkthrough of just a few of the up and coming features to be released in next years ‘Mango’ update for Windows Phone 7.

The UI has really grown on me, looks so intuitive and clutter-free.

youtube.com

Kinect Graffiti

Wasn’t a fan of the other Kinect Fun Labs experiences but when I saw this I immediately thought about the number of creative ways it could be used for programming visual artworks.

I’d love to see what artists and designers like Daito Manabe could create by experimenting with such a tool. :-)

gabeweb

My Personalised Windows 8 Start Screen

After reading Paul Thurrott’s article Microsoft Hits One Out Of The Park With Windows 8 Start Screen and saw he created a personalised mockup of what his start screen may look like, I felt compelled to do the same in order to communicate just how dramatically different the UI is in terms of any other OS.

Windows 8 Start Screen UIWindows 8 Personalised Start Screen UI


Try it out for yourself. Download the original image here then if you want edit it in a photo editing program like Photoshop. Next open it up in Windows Photo Viewer and click the ‘slideshow button’ to view it fullscreen.

I have viewed it on my 1080p HD monitor, 50” plasma TV and a netbook and the interface looks much more appealing and attractive than your standard desktop shell. I can only imagine how amazing it will look and feel on a tablet device. :-)

* If you would like to use my Photoshop document as a template, use the ask form on my blog here remembering to provide me your email address.