Breaking the Grid, the Right Way

Producing a well designed, and aesthetically pleasing web site must begin with planning and preparation. This is not exclusive to gathering content, such as vibrant photos, well-written copy, or choosing appropriate colors and typeface. The very base of your design begins with wire frames and the grid.

A wire-frame is like a blueprint for your site, a skeletal visual representation of how you want your site to look, and how you want to organize and arrange your content.

What is a Grid?

Similar to wire frames, a grid can create a basic structure for your design. This image from webdesign.tutsplus.com is a great visual aid to help understand how the grid works.

Gutters

The grid consists of vertical units, separated by gutters, which together form columns. The units form the grid, and the gutters represent white-space. Columns are simply containers in which to store your content.

A strong understanding and consistent use of the grid will strengthen any web developers technique, and will help simplify the structure of your content. As many of us new to web design can attest, creating a layout can be frustrating. Trying to determine where to place content, how to align the different elements so it flows well and feels unified, can be a challenge.

Breaking the Grid

Traditionally, the grid ensures that columns do not overlap, and elements do not bleed into one another, thus maintaining a clean, legible layout.

Breaking the grid involves challenging the notion of content-focused layout and design. Many designers break the grid to bring focus to a call to action, or to draw the user’s attention to specific content. The grid layout creates logically organized, symmetrical, perfectly aligned content. The intention is to present a clear design which can be easily navigated by new and returning users. There is absolutely nothing wrong with this approach, but aesthetically it can get a bit boring. That’s why designers now are playing with ways to break the grid, in an intelligent and effective way.

Breaking the grid the wrong way will result in a poorly designed site. There is potential to disrupt the flow of content and to make navigation difficult. This article  suggests to choose one way to break the grid then use that approach consistently throughout the site. Your users will appreciate that this new look or function is present on other pages. It not only gives them an opportunity to get used to it, but may create more interest and engagement with your site.

typographyex2

One technique for breaking the grid that I really love is through big, bold typography. Some designers are challenging the rule of separating elements. As seen in the example below, the text on the left begins in its own space, and ends just inside the space parallel to it; the photo. You can see as well the geometric shape of the photo that is almost leaning into the text area, outside its column. I think this is an effective and interesting use of space. It includes the traditional structure of the grid, yet skews it just enough to draw the user in with the text, and take notice of the image. In this example, the layout focuses the user’s attention on the call to action. If you look at the other pages on their site, you’ll see this style is carried through consistently.

typographyex1

 

As powerful as this technique is, not all attempts are equally accomplished. A mistake that is easy to make is trying to break the grid in too many ways at once. Doing so will cause confusion for the user. The site should still be easy to navigate and important content simple to find. This article from Design Shack  offers some excellent guidelines regarding how to apply breaking the grid techniques while still maintaining an intuitive design and a sold structure for your content. Breaking the grid can be a great tool, but keep it simple, know your audience, and be consistent.

 

References

Wasserman, Ed (2016) A Comprehensive Introduction to Grids in Web Design. Retrieved from https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design–cms-26521

Awwwards Team (2017) 30 Grid-Based Websites. Retrieved from http://www.awwwards.com:8080/30-grid-based-websites.html

The Best Designs. (2017) Ghafari Associates. Retrieved from https://www.thebestdesigns.com/designs/ghafari

Cousins, Carrie (2017) How to Break the Grid without Making a Mess. Retrieved from https://designshack.net/articles/layouts/how-to-break-the-grid/

Next Level User Experience

Personalization in UI design is like an extension of responsive design. Responsive Web Design adapts the layout based on the device you are using, whereas personalization adapts to suit the needs of the individual user. The way it looks and how it functions can be tailored so different users see different things. For instance, if you have poor eyesight font-size and kerning can automatically increase to make reading easier.

 

How Does it Work?

You have already experienced a level of personalization through user-specific advertising such as on Facebook, and suggested products based on your search history as seen on Amazon. Personalization in UI design would derive its capabilities from the same pool of information. This metadata is already available and being used behind the scenes so to speak, to bring personalization to its users.

multipleDevices

“The main goal of personalization is to deliver content and functionality that matches specific user needs or interests, with no effect from the targeted users” (Schade, 2016)

 

Personalization vs. Customization

Personalization is done by the system itself by gathering information about each user and applying changes as necessary. Customization would involve more work on the part of the user. They would be given the opportunity to customize features to suit their needs. Both options have drawbacks and benefits.

Personalization offers an individualized experience that requires no effort from the user. Concerns however will inevitably rise surrounding privacy and ethical use of sensitive information. To give a user the most accurate experience will require access to as much personal information as possible, which for many users will cause discomfort and distrust.

Another issue is having to rely on the applications ability to guess what each user needs. If the personalization is way off, you won’t retain users, but if it is too good you may also cause concerns about how much personal information you have. Finding the right balance will likely prove difficult.

Customization will avoid these issues regarding privacy because it puts the user in control. They can decide what information to share or to keep private. It also has the potential to enhance user experience even further than Personalization because users can set their own preferences and tailor what they see to be exactly what they want and need.

The issue however is that many users may not even know what they need. This is especially true for inexperienced users, the very young, or the elderly. Furthermore, giving users such control sounds great in theory, but in actual application may not prove successful. One of the biggest rules in UX design is to ensure users do as little as possible to achieve their goals. Customization requires quite a lot of the user, and I doubt it would have great success unless the interface was very well designed.

 

Age-Responsive Design

Age-responsive design is another term being thrown around for 2017. It incorporates personalization but focuses on age-groups to determine which adaptation of a website to present to each user. This variation of personalization could be an effective stepping-stone into more user-specific personalization. This excerpt from medium.com explains how a site could change:

  • Navigation menus will expand and contract depending on perceived competency of users; those with difficulty will be presented with stripped-down interfaces to make it easier for them to interact the limited feature sets they are already familiar with.
  • Font-sizes and spacing will naturally increase to accommodate the eyesight of the elderly
  • Color-schemes will change; the young will experience more saturated hues, the old more muted palettes.

 

youngppl.jpg

 

Concerns surrounding information security and gathering and use of personal information are extensive and justified. Personalization is a great idea, but the real-world application of it may be problematic. Although it is already creeping into our everyday interactions online, it remains to be seen to what extent personalized UI will be used. The potential for enhanced user experience is there, it is just a matter of execution.

 

References

Buckley, Chase (2016) The Future is Near: 13 Design Predictions for 2017. Retrieved from

https://medium.com/digital-age/the-future-is-near-13-design-predictions-for-2017-654761f12c45#.324yfbpuv

Zolciak, Antoni (2016) Will Age-Responsive Web Design Take the World by Storm in 2017? Retrieved from

http://insanelab.com/blog/web-design/age-responsive-web-design/

Schade, Amy (2016) Customization vs. Personalization in the User Experience. Retrieved from

https://www.nngroup.com/articles/customization-personalization/

Levenson, Hannah (2017) Mobile UX Trends For 2017. Retrieved from

http://usabilitygeek.com/mobile-ux-trends-2017/

Mapping for Success (or Failure)

A standard practice in UX Design is creating user Journey Maps, a process that uses storytelling and visualization to better understand the process a visitor goes through to navigate your site. Journey Mapping will create user personas which represent their most likely target audience, including aspects such as age, geographical location, occupation, etc. The next stage is to collect user goals and related actions to create a narrative of the user experience (storytelling). Before Journey Mapping can begin however, it is important to determine what you are trying to understand, or glean from the map. Are you interested in how long it takes a user to find contact information? Is there a specific customer you are trying to understand better? Once this type of information is decided you can begin to map that scenario.

What is Failure Mapping?

How is this different from Failure Mapping, you may wonder? Both types of mapping rely on data gathered about the user and their movement through your website, and the ultimate goal of each mapping technique is to learn more about your users and to improve user experience and conversion rates.

OLYMPUS DIGITAL CAMERA

The difference however is in perspective. Journey Mapping focuses on where scenarios go well, and when users achieve their goals. This data is then taken and applied elsewhere. Failure Mapping, as you may have guessed by now, focuses on patterns of failure. It asks the question, where did this scenario go wrong? Why did this user leave the site at this point in their journey? Failure Mapping also relies on historical data, so we can see if or when many users share the same point of failure. This is crucial information to have, as it can help to improve user experience significantly. When patterns of failure can be identified, it is possible to fix or at least minimize the impact they will have on user experience in the future.

Why is this Important for 2017?

As stated already, Journey Mapping focuses on the success of your site or product, and as such creates maps with the ideal user in mind. Failure Mapping takes on the perspective of the non-ideal user and finds solutions for them. This will be a powerful tool in 2017 because according to the International Telecommunications Union, half the world will be online this year, and that will inevitably include inexperienced and first-time users. How will you account for their success online? So much of successful UX Design is intuition, but a user who has never used the internet before may not have the same intuitions about its functions as lifelong users.

For example, a few months ago I was visiting with my grandparents, and they wanted to ask me a question about using their computer (as they often do). They were trying to reply to a comment on Facebook, but they said they couldn’t because there was no button to click. I never noticed this, but they were right, there was no button. To post a reply to a comment you need to hit Enter on the keyboard. They had no idea that was even an option because there is nothing to indicate that on Facebook, and as a result they hadn’t replied to any comments for weeks. This is the type of issue that can be discovered with Failure Mapping if it is a common occurrence.

elder

Of course, Failure Mapping will solve more issues than my grandparents learning how to use their keyboard. As more and more diverse groups of users start using technologies for the first time, an increased focus on Failure Mapping will lead to more efficient problem solving and implementation of solutions. Journey Mapping will still have an important role in UX design, but a good UX design team will utilize both techniques to achieve the most comprehensive analysis of their users.

 

Resources

Inside the Elevator

ITU Data

UX Mag

Unified Info Tech

What is this, and Who are you?

“The test of the machine is in the satisfaction it gives you.” – Robert M. Pirsig , Zen and the Art of Motorcycle Maintenance: An Inquiry Into Values

This is the relationship between a website and its users. Of course, Pirsig’s machine is a motorcycle, not a computer, and he only needs to worry about his own satisfaction with the machine, not countless persons he has never, and likely will never meet.

One of the greatest challenges in web development and design is anticipating the needs and expectations of your users, and have that reflected in the design and functionality of your site. Intuitive navigation, layout, typography, and effective use of media (video, audio, etc), all influence the level of satisfaction experienced by your users.

Broadly, this blog is about web design and development trends emerging in 2017. The following three blogs however will be focused on user experience (UX) and user interaction (UI) design. Some topics you can expect to see include Failure Mapping, the continued importance of Mobile First and Responsive Web Design, and trends in typography.

 

Why I’m Here…

I’ve decided to write a blog and focus the content on UX and UI Design and how it relates to current web design trends because it is what I am interested in. How users use your site, figuring out what is important to them, and making that content easy to locate and understand are very important factors in creating a successful site.  If a web site has low traffic, or visitors leave the site quickly, there are many questions that need to be asked before we can ask ‘why?’. Who are your users (age, geographic location)? How are they looking at your site (mobile, laptop, desktop)? What are they looking for (contact information, location, menu)?

The other reason I have chosen to focus my blog in this way is because as a student nearing the end of my program, I’ve decided that I want to pursue UX and UI Design as a career. My hope is that by writing about, and therefore researching these topics, I will gain greater understanding of the field and become more proficient in the ‘language’ of this area of web development.

I hope too that any readers of this blog will provide feedback that I can use to deepen my learning, or give corrections where necessary. I would like these entries to be both accurate and accessible to those who may not be familiar with the content.

Of course, I hope you enjoy reading it too!