|
|
-
Microsoft Surface is a 30–inch diagonal display in a table, with an acrylic tabletop. The resolution is lower than on a regular computer screen, which makes graphics and text look less sharp. This creates some challenges for designers. Sans serif fonts with minimal flourishes, flowing outlines, consistent widths, and generous negative space can be very successful on the Surface platform. There’s arecommended set of fonts such as Arial, Franklin Gothic, Frutiger, Helvetica, Microsoft Segoe®, and Univers that all render nicely. Top tip, it’s important to test any designs regularly on the actual Surface device, as itcan look very different from the screen! Reading angle, distance and environmental factors People use Surface in quite a different way we’veused to with computers. They look at it often from an angle, at greater distance compared to regular screens. All the elements should be rotateableas well as resizeable to enable text reading when users are gathered around the table. Trying to read text upside down can be tricky! Environmental effects such as glare and direct sunlight can affect the experience too. I've been doing testing on what would be the ideal font size for reading longerpieces of text. I took a regular news article and picked the recommended SegoeUI typeface. I found that only at around 30pt font sizes I could very comfortably read the text whilst sitting down next to the Surface. This is quite a difference compared tocomputer screens where around 12pt will do fine. Just a quick note, using pixel instead of point values is actually recommended when developing for Surface, as it enables the pixels to snap in place at runtime and enhance rendering. Choose the best tool for the job What Surface is at its most powerful at, is browsing visually engaging data and exploring it collaboratively with other people next to you. It’s a lot of fun, and definitely encourages everyone involved really participate. This is definitely something we learnt whilst testing our application. We regularly gathered around Surface and debated over various components, sizes, styles, colours, transparencies, gestures, search clouds, concepts, text sizes and so on, and team members liked to get very hands on during these sessions! I wouldn’t recommend Surface for reading long pieces of text for a duration of time. This is much better, comfortably and conveniently done on your laptop or indeed in print. It's great for browsing shorter snippets of text. This really should be taken into consideration by all the Designers and UEs whilst working on the Surface app concepts designs.
|
-
I’ve been working on a Microsoft Surface project for the last couple of weeks. It’s a pretty neat Enterprise Search application that was revealed in FASTForward 09 conference in Las Vegas last week. We also won the User Experience Solution of the Year award, based on next-generation forward thinking for interface and search design. I’ve been designing websites and applications for a long time, tackling Surface for the first time. My experience lies within various large web and e-commerce sites, and this is the first touch-screen application I’ve had a chance to work on. Here are my first thoughts on moving from traditional digital design to the Surface multi-touch world. 
1. It’s fun It was pretty exciting working with this new technology. We were challenged, being able to think outside the box and really push our creativity. Not that we don’t do that with other projects, but using the latest cutting edge technology is always refreshing. All the team members seemed to really have fun with this one. Seeing your designs on Surface as interactive elements and really seeing them come to life creates quite an emotional connection to the work. Friends and family also seemed actually interested in this project, thinking it sounded pretty James Bond like. 2. There’s no top and bottom, or left and right First of all you have to change terminology used. What we call top, bottom, left and right in web environment, doesn’t apply for Surface. It’s a horizontal table which can be used from any angle, 360°. What this means is that the user should be able to rotate all the components on the page, as well as resizing and moving them around. So not only is it multi-touch, it’s also multi-angle! 3. Lose the grid Designers really shouldn’t stick to a fixed gridded layout on Surface with columns and rows, which generally tends to be a starting point for many web pages. You are basically designing various components and you are letting the users create their own ‘layout’. For all the pixel perfectionists out there, be very afraid. 4. Unpredictablity Not only have we lost the gridded structure, we’ve also lost the control over the amount of things appearing on the screen. Users can freely place objects onto the Surface which will recognise them, by using ‘domino tag’ driven object recognition technology. Designers and UEs will have to take this into an account, and consider how the Surface will accommodate these new elements. This is definitely something I haven’t had to deal with much when designing for the web. 5. Multi-user Surface is designed for multi-user, collaborative experience. It’s a way of bringing people face to face and truly engage them. Design really needs to encourage social play and collaboration and make sure it’s always easy for multiple people to use the application at the same time. 6. From ‘click and scroll’ to ‘tap and flick’ One of the biggest differences between web and Surface design, is the shift from mouse clicks to gestures for user interactions. All the buttons and areas of interaction need to be considerably larger, as users are interacting with their fingers and hands rather than a precise mouse arrow. It is extremely important to test all the interactions on the Surface device as early on as possible, to make sure they work well and are intuitive. 7. Colours Whatever you see on your computer screen whilst designing, will look much more subtle and dim on the Surface. You have to really up the saturation and brightness to achieve the maximum impact. 
|
-
Here are couple of thoughts on what's great about the new Microsoft technologies: WPF and Silverlight. It's making it easier for both designers and developers to create good quality work, and to produce it faster!
Current scenario vs WPF approach Typical current scenario:
Designer creates a design in Photoshop, passes it over to a developer, who in turn translates it into code. WPF approach:
Designer creates the layout, controls, interactions and animation in Expression Blend. Developer can open the same project in Blend and add the back end code. At no time the developer needs to touch the actual presentation layer, designer remains 100% in control. This also saves time, as developer doesn’t need to recreate any elements.
“Developers no longer have to try to recreate them; play the hero and rid the world of "developer art." “ as Microsoft puts it on the Expression Blend website. As there are no built in source safe features in Expression Blend currently, something like Visual SourceSafe is pretty handy to use. What's my role, and what's yours? Shall I just pass it over to you when I've finished? No you shouldn't! A designer and a developer should work together throughout the whole project as much as possible. There is plenty of going back and forth and it’s beneficial for both the designer and developer to have the support from each other. Obviously if there is a huge amount of back end development with really simple interface, this will not apply. It is hugely important to get the whole project working in Expression Blend, this makes the process much more seamless and faster. It saves everyone time, effort and money! If some of the front end parts of the code are not compatible with Blend (this should be avoided as much as possible!!!), it makes it very tricky for the designer to work on that area of the project. In this case coding skills will come in handy, but obviously most designers will not have the experience/willingness to delve deep into this area!
Great opportunities for everyone The ideal workflow and roles will become more clear with more time and experience, trial and error. This technology and brand new designer interface tools provide great opportunities for everyone in the industry. Designers who want to learn/deepen their understanding of XAML coding, this is a fantastic opportunity to do so. People with Flash and Director design/development skills will love WPF, as the requirements are very similar. Animations and interactivity are at the heart of Expression Blend. Similarly developers are able to better understand the presentation layer, as the whole project can be controlled and previewed from the same interface. After all, the more members of the team understand about each other’s areas, the easier the process is, and the better the experience for the end user!
|
-
I’ve been working with Microsoft Expression Blend “the professional design tool to create engaging web-connected experiences for Windows” since the beginning of this year. It’s a new program (formerly known as Interactive Designer) from the Windows Presentation Platform (WPF). The software is currently in Beta 2 which can be downloaded for free. The completed product is due to be launched later on this year.
Similar Features to Other Programs
I’m a web designer from a creative background, and I’ve also being using HTML and CSS for front end coding. It’s been very interesting learning Blend. I found many aspects familiar as it has similar elements to other programs I’ve used; Photoshop (similar colour palette), Illustrator (effective vector drawing tools), Flash (animation capabilities) and Dreamweaver (creating layouts, toggling between Design and Code views).
Blend design view:
Blend code view:
Creating Layouts and Assets
There is an Asset Library with plenty of System Controls, such as Button, CheckBox, ComboBox, ListBox, RadioButton, ScrollBar, Slider, TabControl, GridSplitter etc etc. These are prestyled with basic styles, and can be simply drawn onto the canvas – it’s very quick and easy. If there is no budget for any design effort, developers can use the prestyled controls, which don't look too bad. When designers are involved, they are able to change the styling on controls completely. They can change the shapes and colours. Elements can be animated. Buttons can have animated rollover states. The software gives designers endless opportunities to create the exact look and feel they are after.
Asset Library:
Layouts can be controlled from the Layout Panel. Items can be Stacked, Wrapped or Docked, placed in a Grid, or a Listbox. The most freedom is provided by the Canvas, where shapes and pictures can be drawn onto.
Layout Panels:
3D integration
Expression Blend provides great 3D integration capabilities. Complex 3D objects can be created in external applications, and imported into Blend. The sample object below has been created in ZAM 3D - “A New 3D XAML Tool for Microsoft Windows Vista Application Development”. The beta version can be downloaded for free and there are great easy-to-follow video tutorials on the website. I haven’t got much experience working with 3D elements in the past, but this program made it really straightforward.
3D object imported into Blend from ZAM3D:
ZAM3D interface:
Design vs Development – what’s my role
Blend is a very powerful tool for creating applications. The idea is that designers and developers can use the same program, giving designers total control over the design. There is no duplication of effort, as the developers don’t need to replicate any of the design work. When designers create the designs in Blend, it’s already in the correct format for Developers to add their code to.
Currently there are a great number of books aimed at WPF developers teaching XAML coding. There are Blend books for designers in production, but they are yet to be published. They will not be out until the summer. The only way for designers to learn the program is from books aimed at developers and online tutorials and forums. This definitely adds an extra challenge to the mix. Good sites to go onto are www.expressionblend.com, www.contentpresenter.com, http://blogs.msdn.com/expression/ and http://msdn2.microsoft.com/en-us/library/ms754130.aspx.
One of the biggest challenges there are, is to establish where the designer’s role ends, and the developer’s role begins. There is a large area where these two overlap. The role division greatly depends on the designer’s ability to understand and learn XAML code. The more the designer understands the code, the easier it is for them to use it. Expression Blend has great capabilities, but at the same time it is a pretty complex software to use with a steep learning curve in the beginning. If you’re up for a new challenge, this is a great and rewarding one!
|
|
|
|