Posts

DevBits, featured image

The endless waltz: making custom UI for Windows Modern

Branding is a promise. It’s a guarantee of what to expect and a derivation of an identity. Here at AgileBits, we have strong brand identity and our customers can immediately recognize our app, no matter the platform on which they see it. As a recent addition to the AgileBits family, working on the latest addition to the 1Password application family, one of my priorities has been to ensure our new app feels like 1Password. But this, like so many other things, is easier said than done.

At first blush (and second, and third, and…), Windows Modern applications look nothing like apps on Mac, iOS, Android or any other platform; right out of the gate, we had our work cut out for us and we had to decide how to balance the unique Windows Modern style with what has come to be recognized as the 1Password style. In the end, we decided to keep the Windows Modern app as true to the 1Password style as possible. Despite having to deal with an overly verbose pattern for overriding the style template (in some cases 100 lines of code just to change a single property for a button) we continued to customize nearly every area of the app; when the dust had finally settled, our shared stylesheet (for phone and desktop) was the largest single file in our entire project (~1200 lines of code).

But we were able to stay true to the 1Password brand, as evident in our lock screen:

So it was well worth the effort, and we certainly learned a few new tricks along the way! But styling with such reckless abandon does have a cost.

There will be blood (and hacks)

Issues first began to arise when we started testing theme-switching for Windows Phone. Windows Phone gives users the ability to switch between a dark and a light theme. This is a hallmark feature of Windows Phone and one that users have come to expect. But of course, this feature is only available on Windows Phone; the iOS and Android platforms don’t have this capability by default, which added a new wrinkle: do we introduce a feature on Windows Phone that is not available on our other mobile platforms? We also noticed very poor performance with accessibility features when using high-contrast themes, and ease-of-access font scaling had a very low ceiling before the majority of text was cut off.

Why did we perform so poorly? In part, it was because of all the customization we had done. We became so focused on achieving the 1Password look and feel that we customized nearly everything, including many things that we never needed to touch. We also used the RequestedTheme property heavily, which allowed us to force a page to always render in a specific theme; this is a big no-no for a universal app. But more than anything else, it’s how the platform handles custom styles. The moment you create a custom style, you’re entirely accountable for it: you must tell it exactly how to behave under every single scenario a user may throw at you; and on the Windows Modern platform, there are a lot of possible scenarios. There are two default themes for Windows Phone (and two other high-contrast themes), and Windows desktop has the default theme (not light, not dark, just right) along with four other high-contrast themes. Yep, that’s eight themes developers need to support when they choose to add some of their own styling and branding to their apps. The moment you decide to change a background colour, adjust a font’s opacity, or change letter spacing, you’re abandoned by the Windows app platform, and left to your own devices. This desertion isn’t too much of an issue for developers working primarily on Windows modern, as the support the platform gives you to handle all of these scenarios right out of the box is excellent. But it’s an unfeasible expectation for Windows to extend this support to developers who customize their apps so heavily, so we got to work and began getting our stylesheets under control.

The taming of the shrew

After all of our customization, we had to take a step back and see how we could make 1Password work with the Windows Modern ecosystem, instead of against it.

We had no desire to rewrite all of the styles and themes that Microsoft had given us for free with the operating system. The code was ready and available; all we had to do was let the platform do its work without losing our brand in the platform.

Our first order of business was getting our stylesheets under control. We went through the entire app, page by page, and removed any properties we could live without, thereby giving responsibility back to Windows. We then rebuilt support for all the missing themes by first including them explicitly in our stylesheets, and only overriding the system colors in the default or base theme; for high contrast and light/dark themes, we once again passed responsibility back to Windows.

Alternatives

Prior to coming to work at AgileBits, I gained a lot of experience working on web accessibility for the Canadian Government, and we often discussed how different platforms handled accessibility.  On the Mac, instead of separate themes, users are given sliders in the OS preferences to adjust contrast and invert colours when necessary. Keeping these preferences at the OS level takes a lot of the responsibility away from app developers. While it can seem a bit daunting to oversee eight themes (at least) on Windows, the aesthetic and practical usefulness of these themes cannot be denied. For example, users can create custom themes that can be saved to their profile and be made available on the different PCs they use. Also, these themes being predefined make selecting appropriate themes much easier for users.

Conclusion

Branding is a promise. This is our endless waltz, and we cannot fail our dance partners. It’s a delicate balance that we must strike between Windows Modern and the 1Password experience, so that we may engender harmony among 1Password and Windows users.

Join our design team today!

Since my start here at AgileBits four years ago I’ve been designing everything from software interfaces to our booths at Macworld Expo. It’s been an ever-increasingly wonderful and daunting task. As time has gone by and we’ve created new products we have thought again and again about finding another designer to work with me. It is now that time. There are a few ways in which the right person could fit in here, so I’m going to start by talking a little bit about everything I do.

Web Design

We are very much a Ruby on Rails company. Our developers fell in love with Rails long before I joined up and continue to use and love it. Generally I mock things up in static HTML and CSS and leave wiring it all up to them (with quite a bit of back and forth, of course). It works out fairly well, but someone proficient in design and Rails to help take some of the load off me and the developers would be a huge help. HTML 5 and CSS 3 knowledge is a must in this area and JavaScript knowledge a big plus. This is the most likely area for you to fit in.

Ads and Graphic Design

This is by far the area with the least workload but still a very important one. We don’t do a ton of advertising but the occasional static banner ad, etc. comes across my virtual desk on average every few months. We’d also like to get some smaller badges/ads done for enthusiastic users and promoters (which I unfortunately haven’t gotten around to in quite a while). The only other thing in this area I’ve done is a couple Macworld Expo booth designs and pamphlets to pass out there which I don’t think we’ll be doing again anytime soon.

Software Interface Design

UI and UX take up the majority of my time. It’s also my favorite part of the job. I primarily mock things up in Photoshop and, when time permits, write it up in HTML and CSS to show interactivity. My almost entirely computer-illiterate family gets the privilege of being my sounding board. Having them around is an unbelievable help to me. The hope for me is that the right person joining us is going to give me more time to dedicate to this area.

Icon Design

Icon design is one of the areas that challenges me the most. It is incredibly difficult to make something beautiful at so many different sizes! Someone skilled in this area would be a huge boon to me. I have done my best here but end up relying heavily on stock art as a starting point in many cases. As much fun as it can be when I get it right, it would be nice to have someone with more of a specialty in this area.

Finishing Up (and how to contact me)

I’m not entirely sure if I’m looking for someone to almost completely take over one aspect of the design here at AgileBits or for someone that can help me do everything I do. A big part of the decision is going to be based on how well I think you will fit in here. We are an incredibly tight-knit group and there are a lot of challenges to working remotely that not everyone can handle. If you’re interested, I’d love to take a look at some examples of your work. The only real requirement here is a high level of skill and a real passion for design. Please send a brief introduction and link(s) to your portfolio to dan [at] agilebits [dot] com and I promise to get back to you as quickly as I can.

Edit: We are primarily looking for someone full time but depending on your abilities and situation part time is a possibility. I also briefly mentioned working remotely above. Just to be clear this is not a job that will require you to move anywhere. We all work from our homes (or coffeeshops, co-op spots, etc.) which can be both liberating and difficult at times.