Design 13: Accommodating Art Direction

 

dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey

User Testing

It's user testing day. Our senior designer introduces the tests to the recruit. "We're not testing you. We're testing our concepts." The recruit responds quickly with, "I don't like them."

Our senior designer reflects aside, "I need to review my recruiting procedures."

Note

Now we bring the following design elements together for user testing:

What remains is to:

User testing this version highlights that the image heading must be available to visual users without activating the toggle button. This was an oversight when focussed on a single image instance and will be updated at the next iteration. This highlights the importance of user testing.

Key CSS

/*NOTE: "mobile-first" styling of narrowest viewport*/
figcaption,
figcaption.showCaption {
	position:relative;
	padding:1em;
	margin:0 auto 2rem auto;
	width:100%;
	max-width:300px;
	…
}
figcaption:before {
	… /*indicator / pointer */
}
figure img {
padding:1em 0;
}
	@media screen and (min-width:760px){
		figcaption,
		figcaption.showCaption{
			max-width:1000px;
			}
	}
.stars {
	font-size:24px;
	color:#BB8B14;/*Contrast ratio 3:2 */
}	
/* Caption Toggle button */
    .talkbubble {
	…/*styling*/
    }
    .talkbubble:after {
      …/*styling indicator / pointer*/
    }
	.talkbubble:hover,
	.talkbubble:focus {
	…/*accommodating visual hover and focus*/
	}