User Interfaces and Design

coding

coding

The backbone behind every website is a string of 1s and 0s. That’s not very exciting when it comes to design. But the actual interface and connecting with a user is.

Every tiny detail includes elements of design that someone is supposed to engage with from buttons to navigational elements to forms to watching a video or buying a pair of shoes. The goal is to create something that looks nice, engaging and is easy to use. That’s where design and development meet.

Words you need to know:

  • Ajax: Using Asynchronous JavaScript and XML creates an interactive experience where new information can populate on the user end of a website without refresh. A common example is the continuous loading of posts as a user scrolls through a Twitter page.
  • API: By providing specifications for routines, data, object classes and variables, and Application Programming Interface allows different websites or software to “talk” to each other and work together. Think of it as a virtual set of building blocks.
  • CSS: Cascading Style Sheets are the backbone of the language used to style websites and display HTML elements visually.
  • Media query: A CSS element that creates specific rules for certain devices when it comes to how visuals will render. (It’s the magic that makes the same photo render with one aspect ration and crop on a desktop site and another way on a mobile device.)
  • Responsive web design (RWD): A web design technique that used a flexible grid and images, media and text so that a single website adjusts to multiple device sizes. (This is arguably one of the single-most important factors in web design right now.)
  • UI: The User Interface is everything that the user sees and interacts with in a design. This can be everything from how they use the website and device to every individual element on the screen.
  • UX: The User Experience is what each individual user takes away from interactions with the site. This tends to be expressed as an emotional connection and relates to perceived overall value.

Think in Questions

“Each of these interactions should feel like a conversation between two people who trust each other and deserve each other’s trust.”

Every part of a website is asking users to engage or continue to engage with another part of the site. Whether you are playing a game, reading an article or buying a gift, each action leads you to something else. But how to do you get there?

That’s where asking questions come in. If you ask questions in the design process, you can make links between actions, creating a more seamless design with a logical flow.

Nicely Said” by Nicole Fenton and Kate Kiefer Lee is a manual to writing for the web. It also provides a framework of questions that work for every part of the web design experience.

Questions to ask along the way (plus many more from the book’s resource guide):

  • How do people use this content or feature now?
  • Who is speaking here?
  • What problems are we trying to solve?
  • How does this content serve our goals? What’s its purpose?
  • What are the features of the website? How does it behave?
  • What’s the final format?
  • Are there any technical constraints or character limits?

Fenton wrote even more about other questions that websites “ask” all the time. We are talking about the personal details that help users relate to the sites that they interact with. “Each of these interactions should feel like a conversation between two people who trust each other and deserve each other’s trust,” she writes.

Some of those questions include:

  • How can we help you?
  • Where are you right now?
  • Are you willing to pay for this?

The answer to these questions establishes the nature of the interface-user relationship and greatly impacts the design. Think of it this way: If a user is not willing to tell you their location, the design and user interface will not be effective if it is based in geolocation; the design should approach the user in another way.

Think About Simplicity and Direction

coding

coding

When websites are coming together, everything tends to fall somewhere on a map. You can plot the course from one user interaction to the next. (Which is great for visual thinkers.) So think of the design/development process in terms of A vs. B: What’s the next step, A or B?

Every element should have a simple purpose that is easy to define and describe. (Click to play; click to scroll.) If you can’t make it understandable in a sentence, you might want to rethink the design strategy.

Learn Code

coding

coding

Now that you are thinking about things in the methodology of a developer, you need to go out and develop some coding skills. This is not to say you need to be a master coder, but you should understand it enough to make simple changes and talk to other designers and developers coherently. (Plus you can really create some cool effects, such as those above.)

Personally, I started with a little HTML with purpose. I made a list of things I wanted to know how to do and learned them from the inside out (i.e. how to change a color of a site element using a HEX value in the CSS rather than clicking a box on a color picker.) There are plenty of tools available from online classes and tutorials to in-person training in your area. All you have to do is sign up and get started.

Four great code-developing resources:

  1. Tuts+
  2. CodeAcademy
  3. Code School
  4. Khan Academy

Conclusion

Learning web development is not just learning about frameworks and code. It is about the thought process. Designers can think like developers en route to creating a successful website. You just have to be open to the idea.

Understanding that some of the thought processes are similar – visual thinking and weighing solutions and outcomes – are a part of any design or development project. We are all designers/developers in today’s market.

Image Source: Marjan Krebelj.