Web Form Design

I’m working on a UX/admin project that contains a single-page form. I followed patterns that were already set up, and just updated the titles of the fields, not thinking twice about it. During our daily design critique, my team lead asked me if I knew about affordances. Nope. Well, maybe I had heard about it through an article a few weeks ago, but I didn’t really understand it. So after explaining a bit about it, he also recommended I read through Web Form Design by Wroblewski.

Although at first glance, it seems like it may be mind-numbingly boring (a 300 page book on data-entry forms??), it’s actually really pretty great. For a seemingly niche aspect of design, it covers a lot of various concepts including real-world examples, so you know right away how to apply what you’re learning. It really helped me to see a broader picture for UX design in general, such as understanding that all audiences are not the same, thinking through accessibility, measuring ease of use, getting people through tedious parts as quickly as possible, etc.

Putting Wroblewski’s research to practice is a grace for your user and potentially can help increase revenue for your company too (read page 26 if you’re wanting to see a real-world application).

Highlights:

  • Looking at things “outside in” means starting from the perspective of the people outside your organization or Web site. How would they define being a member of your service? Chances are, they’d describe it differently than your database would. They’d talk about what’s on the other side of the form—for example, about the things they’d get or be empowered to do.
  • When succinct labels may be misinterpreted, look for opportunities to use natural language to clarify the questions your forms ask people to answer.
  • Organize the content on your forms into logical groups to aid scanning and completion.
  • Consider asking optional questions only after a form is completed.
  • Use initial capital letters to make the titles of content groups easier to scan.
  • A single path makes it easier to process the questions a form is asking through a consistent layout. This, in turn, can increase completion rates by keeping people on task and ensuring that they see and respond to all the questions a form asks them.
  • …generally about 50 to 75 percent of the height of an input field between each question works best.
  • The difference between checkout and shopping on Amazon.com is stark. Even the site’s logo, which usually allows people to return to the Amazon home page, is deactivated to minimize ways off this crucial form.
  • An accessible form takes into account the unique needs of users who have limited or no vision, limited or no hearing, limited physical movement, or cognitive impairments. Statistically speaking, there’s a 25 percent chance that could be any one of us at some point in our lives!
  • Radio buttons: Allow people to select exactly one choice from two or more always visible and mutually exclusive options. Because radio buttons are mutually exclusive, they should have a default value selected.
  • This basic analysis demonstrates that even seemingly simple data collection problems can be solved in multiple ways, with each solution presenting a unique combination of advantages and disadvantages. The job of the designer is to fully explore and analyze these possibilities in order to arrive at a solution that best satisfies the unique needs of the audience and application.

What is the Role of a Product Designer?

I came across a good article that explains the role of a Product Designer, and wanted to capture my favorite ideas:

“Unfortunately, design has classically been seen as purely aesthetic. ‘Make it pretty,’ they say. This is a perception we have to change. We are the custodians of the user experience, and as such it is our solemn duty to educate those around us, above us, under us, about what it is we actually can and should be doing.

[A product designer is] there to help you identify, investigate, and validate the problem, and ultimately craft, design, test and ship the solution.

When you hire a Product Owner, you likely do so because this person is well-versed in a wide range of disciplines; they understand some front- and backend coding, timing, budget, business value, analytics, management, etc. In many ways, this is how you should be thinking about hiring Product Designers. Sure, they might have a beautiful portfolio, but can they be a key player throughout the entire product development process? A good Product Designer knows a bit of animation, prototyping, coding, research, visual and interaction design. They know when to deliver wireframes, and when to deliver pixel perfect mockups. They know when to use animation, and when to prototype. They know how to convincingly communicate their solutions.”

What is Product Design? —article by Eric Eriksson

Quarterly Book List 2 and 3

These last two quarters I have been reading on a variety of topics. I am keeping it design heavy, but have also incorporated other topics that pertain to me individually. These books, such as Quiet, or Everything is Workable are useful in understanding personality differences while still collaborating with other people, so very much an integral part of being a designer. Towards the end of this quarter I am getting pretty specific with my UX skills in something like Web Form Design (review with quotes coming soon). Hope you enjoy.

I have sorted this list with my most current read at top.

The Visual Display of Quantitative Information by Edward R. Tufte Read

Web Form Design: Filling in the Blanks by Luke Wroblewski Read

Everything Is Workable: A Zen Approach to Conflict Resolutionby Diane Musho Hamilton Read

Designing Your Life: How to Build a Well-Lived, Joyful Life by Dave Evans and Bill Burnett Read

Bird by Bird by Anne Lammot Read

Creative Anarchy: How to Break the Rules of Graphic Design for Creative Success by Denise Bosler Read

Designing Brand Identity: An Essential Guide for the Whole Branding Team by Alina Wheeler Read

Quiet: The Power of Introverts in a World That Can’t Stop Talking by Susan Cain Read

Lean In: Women, Work, and the Will to Lead by Sheryl Sandberg Read

Midnight Driver Song Poster

Info:
Midnight Driver by Minako Yoshida
18”x24”
InDesign // Illustrator (with some help from Photoshop for the galaxy shots)

While working on my poster for this year’s Always Summer Poster Show + Mixtape event (hosted by AIGA Jacksonville), I had two different approaches I wanted to explore.

The first approach I wanted to limit myself to a black and white scheme that had a strong concept. In this version, I used moon phases and the night sky (actual screenshots from theskylive.com/planetarium of the exact date and time of the event over Jacksonville). I also wanted to emphasize the use of line as an infinite extension, a reflection of the endless road for the Midnight Driver. In this experience the darkness of night gives the perception that the earth and galaxy are a reflection of each other, an infinite, linear drive into the midnight sky.

Other little cool things: the paper texture is Hosho printmaking paper, to keep with the Japanese theme, and to give it a little oomph.

I used the typeface Kyrial for both posters. I thought this was a strong choice because it’s very sturdy, yet the friendly spurs (the little curves on the ends of the d and t) give the effect of continuation. Both things help reinforce the overall concept-driven posters, and help to give the song an approachable voice.

The second poster I went a little crazy. I wanted to push myself on the constellation/planet centric concept as well as think about using a literal road rather than implied roads by use of line (as in the first poster). I also wanted to explore a color palette that could connect to a summer sunset while looking rather space-y. This concept also suggests the infinite road, each planet representing you as the driver existing at each passing point, always moving along the road into the future, yet still existing in eternal time always at once where you had been, where you are now, and where you are going. Yes, pretty hippie explanation.

Cool things: The background is a photoshopped screenshot from the online planetarium I mentioned earlier. I took out the larger stars since they were visually distracting.

The final I submitted for print is the very last one in the above sequence. All submissions will be available for view at the event on September 23.

Last but not least, if you want to hear this funky number, check it out on soundcloud.

Empathy through Collaboration

I’m reading a pretty interesting book right now, and would recommend it to anyone. It’s not just for “designers,” it’s applicable to anyone wanting to live a fulfilling career life, etc. I really like this quote, because it’s so true for our design team, but across various teams in our company.

“Many people think that designers are lone geniuses, working in solitude and waiting for a flash of inspiration to show them the solution to their design problem. Nothing could be further from the truth. There may be some problems, such as the design of a stool or a new set of children’s blocks, that are simple enough to be tackled by an individual, but in today’s highly technical world, almost every problem requires a design team. Design thinking takes this idea even further and suggests that the best results come from radical collaboration. Radical collaboration works on the principle that people with very different backgrounds will bring their idiosyncratic technical and human experiences to the team. This increases the chance that the team will have empathy for those who will use what they are designing, and that the collision of different backgrounds will generate truly unique solutions.”
—Excerpt from Designing Your Life by Bill Burnett and Dave Evans

International Women’s Day

 

international-womens-day-2017

Wanting to quickly turn out a poster that reflects a current event, I made this poster to commemorate International Women’s Day, March 8, 2017. Initially, I posted just the red watercolor swatch on Instagram with the quote written for the description in the post.

I have always been an advocate of women’s rights, especially equality in education, the workplace, and personal relationships. There is way more to this topic than I will talk about here today, but I think the simple design is powerful.

I mixed a fuschia dark pink with a red (close to CMYK red). I used bold and confident brush strokes to outline the shape. I wanted it to have a natural merging/blending of the shades of red to indicate that all women are unique and that we come together with many different backgrounds. Our diversity brings intelligence, joy, beauty, hard work, and ingenuity to this world (and way more!). The loose ends of the open strokes towards the top, as well as the splatters of red remind me that no human is perfect. In our march towards equality, we have to remember that about ourselves, as well as those around us and in our community.

One of my most favorite things for this project was using typefaces that were created by women. I found this curation of typefaces designed by women, and navigated to the option “Text Font.” → typequality.com

I already had a few of these typefaces, and was excited to learn this new fact about them. The typefaces I ended up going with were both created by the same designers, Veronica Burian and José Scallion.

My aside on this is that even without knowing the typographers sex, these typefaces are dynamic and damn solid. Being a creator is just that. It is having the gift and doing it. The problem lies in where women creators are not spoken of (even mentioned, or given credit) as men creators are, historically and today. Although we are making huge strides! I notice this in fine art, architecture, music, typography, etc. Hopefully that makes sense, but for now, I digress.

Typefaces:

Abril (found on Type-Together)

Adelle Sans (found on Typekit)

Download a free, full-size poster PDF → womens-day-poster-2017