Office is one of the bright spots of Windows 10 Mobile's new universal app system. Featuring an entire family of beautiful, functional and powerful mobile apps that can be used for productivity both on the go, and in the office via continuum. While Microsoft's own Office Blog hasn't given us an in-depth look at the process behind the creation of Office for Windows 10 Mobile, an ex-Office designer, posting via UX Launchpad, has posted a lengthy run-down of the process involved in whittling down something as complex as Office to a mobile phone.
First, they start off with branding discussion. While some may find it strange that a discussion about design begins with branding, Windows Phone and Office – as brands – used to have very different design directions. The typical Windows Phone app and Office for Windows had different design principles in terms of navigation, use of white space, button placement and so on. The designer demonstrates this by contrasting the Windows Phone 8 Outlook Calendar app with Office's Word app, and the difference is quite stark.
There's no right answer. Go too far in the "platform alignment" direction and your app feels boring. Vanilla. Lacking personality. Best practices and common controls are all well and good but personality still matters.
On the other hand, embracing the company brand sounds like a good idea but many companies overdo it. They work to get company typefaces, logos, colors, and even interaction models crammed onto the screen, but it's easy to overdo it and feel ill-suited to the platform.
Obviously the answer is to strike a balance between the two extremes, but finding that balance can be an extremely difficult process. For example, look at this screenshot of Microsoft Word next to the Windows Phone 8's Calendar app. Everything is different, from the interaction models to the feel of the visual design.
Another thing that influenced the design decisions was Windows 10. Windows 10 Mobile can be used on a anything from 4 inch handset all the way up to 40 inch screens and even more. When developers are designing for Windows 10, they have to take all these things into account. The design had to be something scalable and something that would work on both small and large screens.
We quickly realized it was no longer possible to split the experiences based on hardware alone. We knew Windows Phones would be running Windows 10, complete with mouse, keyboard, and monitor support. In fact, I had some friends working on reconciling Windows Phone and Windows, and it sounded meaty and complex.
Of course, there were other interests in the Office for Windows team beyond the immediate design team. The Windows Phone team, the main Office team, the Office Mobile teams for iOS and Android and of course Ballmer and Nadella (later) would need to be involved in the design of Microsoft's premier software on their own in house OS.
Oh, then there was that team's leader and perhaps 15 other executives who cared deeply about what Microsoft's marquee software would look like on Microsoft's marquee hardware. Everyone from the CEO of Microsoft to the head of Office to the head of Office Mobile, and plenty more besides.
Then there was the entire Windows Phone team design studio, who weren't directly working on Office but cared deeply about what they were going to be including by default on their phones. But the designers were just one faction, of course. The Windows organization is full of product managers and developers, each asked to make their feature great.
Then there were the two other platform teams: iOS and Android. iOS was on campus, a short walk away. The Android team was in India, which meant a lot of long distance travel to make sure we were aligned and moving in the same direction. Then the team working on Office on tablets…
They also tackle issues with consistency in design. Some have pointed out that Office acts differently from every other app in terms of design, but he says, that if using a consistent design makes the overall experience work, then they have earned the right to branch out and think differently.
The word "consistency" is tossed around a lot in software design, but there are plenty of cases where a fully consistent design actually makes things worse. This was one of those situations. We used the term "earned differences" to explain this and many other decisions. We would try using the same design across platforms, or across screen sizes, and if that didn't work, we'd say we "earned" the right for the designs to be inconsistent.
Finally, the dreaded hamburger menu is covered as a necessary evil. It is freely admitted that the hamburger is a random junk drawer, but also something that is necessary. Sometimes, in both real life and software design, a junk drawer is needed to fit things that don't fit anywhere else. There is a more detailed explanation than Albert Shum's explanation almost a year ago but the conclusion is the same.
…if they have software, use the hamburger menu or something like it. Maybe it's not drawn with three horizontal lines, but I guarantee a design pattern that says "touch this button to see more options" is in use across the galaxy. And I don't even know if aliens exist. But if they do, and they have something resembling software, they have realized that responsive design is the only way to translate a design from a small canvas to a large one. I believe this is as significant a discovery as fire or shopping malls.
There's a lot more detail in the Medium post (along with pictures) linked below, it is a long read but I think you'll be better served reading the whole post than this brief summary.
Check out UX Launchpad's Medium post from the source link below and let us know what you think in the comments:
Source: Even aliens use hamburgers", Office for Windows Mobile design explained
No comments:
Post a Comment