I had the pleasure of attending An Event Apart in Boston back in April. Self-described as, “The design conference for people who make websites”, it was definitely a huge inspiration and learning experience for someone who does, indeed, make websites. The conference consisted of twelve speakers from all walks of the web world. Over the course of two full and informative days, I learned so much about the future of web design and technology. There were a wide range of topics that were touched upon, but I want to focus on what I felt were three underlying themes: responsive design, screen sizes, and user experience. Now, these may not come as a surprise from a web conference, but of course there are new and interesting ways to discuss and think about these topics.As much as I’d like to separate these three topics into sections, I can’t! Due to the fact that they are so relevant each other, I must discuss them through the ideas and guiding principals expressed at an An Event Apart.
One of the big focuses was creativity. There is so much that can be done with the web, and people shouldn’t feel restricted to standards. Don’t be afraid to push forward new ideas just because they’re different from what everyone else does. We have gotten very wrapped up in the PC paradigm where everything is organized by pages, but in reality, the current orientation of various devices has rendered the page fold moot. Jeremy Keith provided an example of the password field, and how the standard is to hide the text and show those all too familiar bullets or asterisks. This was developed as a standard because people has this idea that someone might be standing behind you watching you as you type. Future has shown this to not really be the case. Now, in a world of decreasing screen sizes, keyboards are less tactile and much smaller, so the ability to see what you are typing is pretty integral. It can get very frustrating trying to type a long, complicated password (which is the requirement from many sites nowadays) where you cannot read what you’re typing. A trend that is catching on is having the option to show or hide the password.
Instead of deciding for the user, give them the option. Just because everyone has been doing the same thing for years, does not mean it’s the perfect solution, especially when we live in a world of ever changing technology.
There are also so great ways to embrace new technology even if it isn’t supported. The beauty of the browser is that it will ignore code it doesn’t understand, so there is no reason to not implement new things and be ahead of the curb instead of playing catch-up when the trend is already established. Some cool ideas that I found particularly interesting were from Luke Wroblewski and Lea Verou. Luke discusses the already familiar media queries and how to use them in more innovative ways, for example, using a vertical media query. Why not consider the fact that people are using so many different screens and that maybe certain screen orientations should consider where the call to action buttons are, or how large the font is. Consider the user and how they are interacting with their screen. Lea Verou talks about color for the web and how to make it more usable for the programmer. From hex codes to rgb, there hasn’t really been an intuitive way of coding color. If someone gets familiar with the convoluted formula, sure they would easily be able to identify a color by hex or rgb., but why should it have to be learned? If someone has any semblance of constructed color, be it from painting or just choosing color schemes, they should be able to figure out how to code color without having to use multiple programs to identify a scheme and figure out hex or rgb. Lea introduces the HSL variant. Using hue, saturation and lightness to determine a color. This form of color thinking is so much more intuitive and logical. I’m glad that this idea has been taken into consideration and pushed forward. Programmers are users too, and there is no reason we shouldn’t be given the opportunity for a good user experience within code.
© Luke Wroblewski 2014
© Lea Verou 2014
Another way to really respect and focus on the user is using research. Investigate the types of people coming to your website, or your competitors’. There are plenty of resources for this kind of research to be done easily. (Chartbeat, etc) the beauty of this method is that there is no longer an excuse for uninformed decisions. The idea that opinions are left up to taste and personal preference becomes irrelevant, and good design and functionality can shine through with research supporting it.
In 2011, a study done by equation research found that 71% of people expect their phones to load almost as fast, if not faster on their phone than their desktop (Source). For many who work in the web, this just seems absurd because it’s a pretty standard fact that of course things load slower on a phone. The truth is, people who are not keeping up with technology in the way that we are, are bound to expect different things. People expect because its smaller it should move faster, or because its a more intimate interaction that it would be faster. The beauty of user research is that we are able to find out users’ beliefs, things that we may not have realized because we forget how involved and informed we are about technology. Another study shows that 90% of user are finishing tasks across multiple devices and screens (Source). This is a really interesting and important fact to know! This makes the understanding and focus on multiple screen experiences so integral to design and development.
We can get very wrapped up in the massive amount of screens that are now on the market, and worrying about how to accommodate all of them. We need to keep focus on the fact that the user is who we are designing for. Continuing to focus on the user will help us move away from us relying on devices, to the devices using us. Think of the actual physicality of using a device; it doesn’t get much more intimate than interacting with your hands. It has always seemed natural to move from using buttons to everything being done on touch screens. If we consider the posture of the user, if they may be laying down or sitting, or standing while using a device, it can really educate us on how to properly design the functionality. Creating accessibility across all devices can include the support for both touch and mouse/stylus across devices. You shouldn’t automatically assume that a certain sized screen is going to be using touch. There are some more features to media queries as well – level 4 includes the ability to identify device orientation, the device’s aspect-ratio, the resolution of the screen you’re viewing, what kind of input is being used (touch or click), and my personal favorite… the light-level. I can see light-level being really neat to work with for color schemes, font sizes and other things. It will use the sensor on your phone (that will automagically change the screen brightness depending on how bright or dim the light is where you are) and you can then change various components depending on the level, whether its normal, dim or washed.
Media Queries Level 4 (Source)
@media (orientation:portrait) { … }
@media (device-aspect-ratio: 16/9) { … }
@media (device-aspect-ratio: 32/18) { … }
@media (device-aspect-ratio: 1280/720) { … }
@media (device-aspect-ratio: 2560/1440) { … }
@media (resolution >= 2dppx)
@media print and (min-resolution: 300dpi)
@media (pointer:coarse)
@media (hover)
@media (light-level: normal)
@media (light-level: dim)
@media (light-level: washed)
All of these considerations of the user can really help drive forward good design and development. Instead of focusing just on the devices and how to accommodate for them, we need to make sure the user is the priority. Another way to ensure a great experience is to allocate time to make sure your page load speed is up to par. Just comparing yourself versus competitors and sites that are well made is a great way to gauge how much work needs to be done. There are some great tools you can use such as ChartBeat (Link), WebPageTest.org (Link), and Page Speed Insights by Google Developers (Link). One way or another these sites can really help you find valuable information about your users and how easily they are able to interact with your site.
I think one way I can sum up my learning experience is a pretty obvious statement, but I believe it’s worth repeating:
DESIGN FOR THE USER!
They are the bread and butter of why we make websites… and don’t forget, YOU are a user too!
After attending An Event Apart, I can certainly say I walked out of there with a ton of knowledge in my head and a skip in my step, ready to get to work on making more innovative and beautiful websites.
Thanks for reading!