– by Steven C Diaz –
A few years ago, while on a family vacation in Southern Utah, we were enjoying a nice short hike at Kolob Canyon, and learned a lesson that I have reflected on in many instances of my life.
As we approached a nice overlook of the canyon, I saw a rock that fit perfectly in my hand about the size of a baseball. Without my kids or wife seeing what I was doing, I went to the edge of the lookout and channeled my inner Clayton Kershaw, and let the rock fly as far as I could down the canyon. Because that’s what boys do, we have to show off and try to impress those around us.
Being Eagle Scouts, both of my boys yelled at me as if I just committed one of the worst acts in humanity. “Dad! What are you doing, you don’t know who or what is down there”. Of course, I knew better and I shouldn’t have thrown that rock. As I was trying to correct my dumb decision, my wise 14-year-old boy at the time said something that pierced my soul.
“Dad, even the smallest of rocks can move the biggest of boulders.”
And since that fateful day in July, I have always tried to keep those words alive in different aspects of my life. Sometimes the smallest things we do can have a large impact on things. Recently I jumped into a course from the Interaction Design Foundation course, “Agile Methods for UX Design” presented by Laura Klein, and the same lesson was learned that my son taught me years ago. Designers at times, need to force themselves to keep things simple and design small, and sometimes our deliverables don’t need to be perfect.
Keep Things Simple and Design Small
Designers who work in agile teams can feel a tremendous amount of stress and pressure to deliver what is expected, and sometimes with that pressure comes the lack of skipping research, cutting corners, and jumping straight to execution. Laura Klein stated, “If designers want to work agilely and still design great, user-centered products, we need to stop designing faster and learn how to start designing less.” To be able to do this, agile teams and designers need to change their mindset from designing everything at once to designing and focusing on the smallest thing possible that can have the biggest impact. (Queue the quote from my son)
But why start small if the project is so large in scale? I think we have all been in the position where we have put so much time and effort into a product or feature only to roll it out and fail. Think about how nice it could be to ship a smaller version of a feature, and hand it off to users for testing to make sure it is effective. Delivering small features early gives you information that can help your team decide whether the rest of the feature is worthwhile.
Delivering smaller chunks of features and information, allows you to deliver early and more often to get the feedback before assigning a ton of resources to something without knowing if it’s going to be a successful feature or product or not. The takeaway from this thought is, if designers want to get more agile, they should learn how to make small things, get feedback, and embrace experimentation, iteration, and refactoring.
It doesn’t have to be perfect
I have a background working in various corporate teams that have an agency model in the department where it is expected to push many different deliverables out quickly with short deadlines. This can become something that creates burnout in designers and teams, and I have been there many times. Moving over to an agile team and methodology I held on to the same mindset that I needed to create and push out perfect polished designs in those short sprints. This caused a lot of stress until I realized that sometimes it’s okay if I wasn’t pushing out the whole product or feature at that time.
Being a designer on an agile team required me to adapt my work to a new way of thinking. If I thought I was going to be able to push out major features and products in those sprints, I would for sure burn myself out in a short time. I knew I couldn’t skip or miss any part of research or discovery, but also wanted to design polished-looking prototypes, so I had to find a balance. But one thing that helped me was remembering the outside world doesn’t have the same definition of perfect that I have.
Being able to adjust my thinking and letting go of being a perfectionist is something I am still trying to learn. I can push out designs that aren’t perfect, but I also need to hold others accountable to make sure that we revisit and address polishing up those features I had a better vision for. And ultimately that’s what an agile team is expected to do.
Conclusion
This course and certification offered some very good ideas and best practices to put into place to allow designers to be as successful as they can in Agile teams. We want to contribute, we want to deliver, and we want to make an impact. And for at least myself, I realized I need to change a few ways of thinking.
Continuing to collaborate and get input from team members will help everyone understand the motivation behind suggestions and take the next steps accordingly. Being able to share progress early and often with small features and designs will help speed up your work and effectiveness, and involving and understanding customers early will allow you to receive data to make sure you are delivering the most effective solutions. Delivering small chunks and small low-fidelity features can help you and your team receive customer feedback and make sure you are not going down the wrong path.
And never forget that the smallest of rocks can move the biggest of boulders.
By Steven C. Diaz, Senior UX/UI Designer STG Consulting
I had the opportunity this past week to complete the course “Accessibility: How to Design for All” offered by the Interaction Design Foundation and was impressed with the knowledge given to me, the exercises that were given, and the eye-opening experience it had on me in knowing I have a lot of room to grow. I could probably share a lot more than these few takeaways from this course, but who really wants to read an 8,000-word long blog post?
Empathy
We all hear a soft skill of UX design is having and showing empathy. I will be honest; I have fallen into the trap of designing for my own personal preferences instead of what’s a better experience for the user. When I started this course, I felt my empathy for users changed completely. I have lacked in thinking and making accessibility a priority in my designs, and realized through my laziness and lack of education many users could have not had the best experience.
I have also fallen into the trap of assuming the majority of users wouldn’t have a disability that would prevent them from still having the same experience as others. But throughout this course, working on exercises of imitating disabilities, and seeing users with disabilities try to navigate sites with zero problems, really makes you wish everyone could have the same pleasant experiences when doing things most people take for granted.
Be Mindful
Maybe it ties into showing more empathy, but being mindful from the initial concept of design to the final handoff is what’s going to allow your experience to be more accessible for every user that interacts with the final product. Even from the beginning stages of hearing current user experiences, to whiteboarding new processes and flows, you should be mindful of how all users no matter their capabilities will interact and use your product. It’s easy to get caught up in all the fun interactions and capabilities of a site, but as you do so, think of how those interactions will display for those that might be visually impaired or those whose motor skills might be a challenge. Being mindful in the beginning will make your life and the development team’s lives much simpler than trying to address these issues after launch.
Don’t Settle For “Good Enough”
I have always been a competitive person. I get fired up when my abilities are challenged, or when I want to be better than a competitor in my industry, or when I realize I didn’t give my best efforts and know I can do better. Most days, I’m turning everything into a competition and It’s probably far from being healthy. I just don’t like to settle for good enough, and know in the future I will be turning the web content I create into a game by making sure the accessibility is the highest it can be.
When building and developing web content and making sure that content is accessible, specific guidelines are put in place to ensure individuals with disabilities can have a positive experience.
These guidelines are organized into three levels of conformance:
- Level A is the minimum level.
- Level AA includes all Level A and AA requirements. Many organizations strive to meet Level AA.
- Level AAA includes all Level A, AA, and AAA requirements.
Most companies seem to only strive to get to Level AA to make sure they are compliant but have no desire to go the extra mile to give a better experience. Yes, deadlines, budgets, demographics, and lack of knowledge all play a part in these applications not going the extra mile. But after seeing users struggle with basic functions of trying to comment on a friend’s social post, reserve an AirBnB for a vacation, or even order food to have delivered to them, it’s painful to see many organizations don’t strive to go the extra mile and make it a competition to make an impact in someone’s life by giving them a better experience.
Quick Reference for WCAG Guidelines
Conclusion: Make Someone’s Life Easier Today
I have mentioned I was completely unaware of the bad experiences many disabled individuals go through while navigating; what we assume, are basic functions of the web. Frank Spillers mentioned throughout the course to be mindful and strive to make someone’s life easier today. Designers all know that our main job is to be “problem solvers”, I love that aspect of my career. Unfortunately, I have dropped the ball on some of those problems and experiences I should be solving.
I dread thinking back and wondering if I made a bad experience for a user on that banking site I helped develop, or that eCommerce site I worked on, or that education site I managed. I need to be better and work on making someone’s life easier today. Can you imagine the joy and relief that disabled users would have if they were able to navigate your site easily and accomplish their goal of visiting your site? Our job as designers is to give the best user experiences possible, and showing empathy, being mindful, and doing more than what’s “good enough” will give all users that better experience they are hoping for and expecting.
By Josh Porter
Custom CSS Properties are now supported in all major browsers except IE 11.
Custom CSS Properties used be called Native Browser Variables. They have since changed the name to distances the Custom Properties from SCSS variables. Lets dive in and see them in action.
SCSS vs. Custom Properties
You can see the top left example is SCSS and the bottom left is using Custom Properties. They render the exact same result on the right of each example.
Why Use Them?
- No pre-processor necessary
- They Cascade: You can set a custom property inside any selector to set or override its original value
- When their values change the browser repaints as needed (i.e. media query or other state)
- You can hook into the custom property via JavaScript
Drawbacks and Benefits
| Drawbacks |
Benefits |
| IE Doesn’t Support it&elipsis;yet |
- Custom properties exist at runtime
this means that their values can update in the browser and it will be updated in real time |
|
They can have a fallback inline with the value separated by a comma |
DEMO TIME
bit.ly/css-cp
In this example I am setting the custom properties to :
--width: 25%;
--margin: 20px;
--background-color: #177C9C;
In this codepen I am setting media queries to change at 600px and 400px max width so on window resize the custom properties are changing on the fly and there is no need to have the page rerender.
A better example of custom properties being scoped is bit.ly/css-cp-1.
In this example I am setting the font size to 5rem but scoping the property by class and it is scoped within that class. For example:
So class .block__highlight redefines the custom property of –block-font-size as well as .block
Something else you can do is just assign a property on a pseudo class:
So I am assigning a new value for –bg-color in div.red:hover but I am not assigning a property(in this case background) it is inherited by the div.red class.
Changing Custom Property via Javascript
In my opinion the coolest thing you can with these is access custom properties via javascript. Once you do the page doesn’t need to be re rendered. It live paints the changes. Here is an example: bit.ly/css-cp-2
I have a event listener on change and setting the custom property to the value of the input
CSS GRID
CSS Grid is the future of website layout…. In my humble opinion of course.
What is it?
Flexbox vs GRID
“Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together).
Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.
If you only need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then you probably want flexbox. If you want to define a grid and fit content into it in two dimensions – you need grid.” – http://gridbyexample.com/what/ – Rachel Andrew
Given the above image to code this I would use Flexbox by doing this :
I would set the wrapper to display: flex and flex-flow: row wrap; I then have to set the children elements to have a width, height and margin.
The Grid way:
Before I start showing the way to code it in Grid. I want to go over some new terminology that comes with CSS Grid.
 |
Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name. |
 |
A Grid Cell is the space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell. |
 |
A Grid Track is the space between two Grid Lines, either horizontal or vertical. |
FR(Fraction Unit)
Fraction units, or fr, represent 1 portion of the available space left within the grid. Think of it like Flexbox’s flex-shrink and flex-grow. All fr’s are in relation to one another.
Keep in mind that frs used on row heights will behave differently than on columns.
So for example you will see CSS like:
The top example will give a grid with 4 columns with 1fr width.
The next one will give you the same. But it uses grid’s repeat function.
The width and height of the grid can accept mixed unit measurements.
GRID-GAP
Short hand for a combination of grid-column-gap and
grid-row-gap, this is what defines the spacing between cells. Again, it’s not picky on unit types.
However, the grid-row gap and grid-column-gap have to be the same for each column gap or row gap…..unfortunately
A couple things about grid-gap.
- It is declared on the parent;
- Grid-row spacing is declared first in the short hand version.
WHEN CAN WE USE IT?
Now I now showing you this is a BIG teaser but it is coming I promise. All the major browsers have shipped with this new feature in their next release. The rumor is that they will be releasing by the end of March 2017. However, there is a chance that they won’t release the version until the end of 2017.
How do we use it today?
Here is how you enable that feature in your browser today:
- CHROME: ITs live on the latest version.
- safari: menu: Develop > Expermenital Features > CSS Grid
- Firefox: It’s live on the latest version
- Opera: opera://flags/#enable-experimental-web-platform-features
- Epiphany: set the env var to WEBKITGTK_EXPERIMENTAL_FEATURES:$ export WEBKITGTK_EXPERIMENTAL_FEATURES=”CSS_GRID_
OK now let’s code that same grid but now using CSS Grid.
You can follow along by going to this codepen and trying out the code yourself.
Here is what I did to create a 4 x 3 grid:
The declaration is only on the parent not the child. The grid is smart to layout the dom elements with 4 lines of code.
You can tell a child to start at a specific location by telling it : grid-column or grid-row.
For the 4 x 3 grid you can see the grid lines in green.
If you wanted box 10 to start at the top you write this:
.ten { grid-column: 1 / 2;}
This is short hand for grid-column-start and grid-column-end. Same goes for grid-row.
Let’s build this layout:
SOLUTION:
With declaring 4 classes I have created a pretty complicated layout.
TEMPLATE AREAS:
This feature gets me excited. This allows easy access to assign children to a specific area.
The above code renders something that looks like:
Final project: bit.ly/css-grid-final
Building this in flexbox you would have a number of parents wrapping different sections of the page.
The solution using grid only has 1 parent!!!
In summary….I believe that CSS Grid is the FUTURE of website layout. That said it is not a replacement for flexbox. I think they can be used together to accomplish pretty complicated layout. So look for this new feature coming to all browsers coming soon.
By Neal Jenks
Design Consultant and IxD Practice Manager at Software Technology Group
In a recent blog post, I referred to UX Designers as ugly ducklings. Just like the infamous bird of fairy tale lore, we aren’t much to look at; however, we’ve already done some growing up, we have tons of potential, and when all is said and done, I think we’ll become beautiful.
The field of user experience design is still in its infancy, and like many nascent beings, we are continually defining and refining ourselves. Yet even in the throws of full-blown evolution, we are just as essential to modern enterprise as the Internet.
In other words: Just because it’s ugly doesn’t mean it’s inessential.
“Don’t they know???”
That being true, I’m shocked and dismayed at how often software developers, project managers, and even executives fail to embrace user-centered design.
A little while ago, a client of ours approached me with what I considered at the time to be a strange request. He said something like this: “I understand the value of user experience design, but unfortunately, I’m not the one who makes that kind of decision around here. Can you give me some ammo for selling UX to my higher-ups?”
I was incredulous. “Don’t they know???” I exclaimed. The idea that someone didn’t understand the value of UX had never occurred to me. This revelation led to several inquires on my part, and sure enough, it turns out that many have yet to see the light of user-focus.
That’s somewhat understandable, I suppose. I’m not an accountant, so I’ve never seen what all of those funny number thingees do for company growth. I’m not a lawyer, so I’ve never experienced the fulfillment of emptying one company’s coffers into another’s. I’m not a Director of First Impressions, so I don’t know… what the heck they do.
Fine. No problem. You don’t know me, playa, so you don’t know why you need me in the game. Allow me to ‘splain.
More Than the Pointy End
In one of my favorite swashbuckler movies, The Mask of Zorro, Don De La Vega, the aging defender of the oppressed, wants to hand off the Zorro title to his young and fiery apprentice, Alejandro. After De La Vega explains his intentions, the overly alacritous apprentice quickly draws his sword and shouts, “Let’s go, then!”
The wizened master wisely asks of Alejandro, “Do you know how to use that thing?” Alejandro shrugs and says, “Yes. The pointy end goes into the other men.”
In the war of commerce, it is much more tempting to focus on the pointy end of the sword than the tang (You know: The part you grip). But when it comes right down to it, the sword is worthless without a steady hand to guide the business end.
A company’s products are only the tip of the sword. You need the steady hand of user experience design to ensure that those products reach the end user in productive and meaningful ways.
Marcin Treder, CEO at UXPin, said, “User experience design is a strategy of product development and IT SHOULD BE PRESENT AT THE BEGINNING. Focusing on the experience of your future users should lay at the heart of your approach to product development. There’s no other way.”
Why is there no other way? Because the sweet spot of the UX Designer is the interpretation and execution of…
…In short, everything you need to make a product successful.
Here are four reasons why UX design is an absolute necessity in the product creation process.
#1: UX Designers Are Your Only User Advocates
If years of experience with user testing have taught me anything, it is this:
You (the product’s creator) are NOT your user!
Companies always assume that they know exactly what the product needs to do in order to fulfill the user’s wildest dreams. But you know what? They honestly have no clue. Why so much delusion? Because businesses take so much ownership over their products. And because they take so much ownership—so much pride—they assume that the users see the same intrinsic value that they see. But trust me: Users see something entirely different.
Companies carry too much bias towards their precious creations, and as a result, they don’t ask enough, and the right, questions. This leads to inevitable myopia—and to products that come far short of their mark.
That’s where the UX designer comes in. They discover who your user really is and understand how to bring their hopes and desires to bear regardless of corporate bias. They know how to ask the RIGHT questions of the user, and afterwards, how to fight for them.
UX designers build EMPATHY for the user, making the entire product team more selfless. Selflessness is an extremely productive mindset. Product teams come to see the product, not only as an expression of business objectives, but also as a tool for making the user’s life better. User-first mentality always leads to improved products. And funny enough, stronger products make for stronger quarterly statements.
Quoting again from Marcin Treder: “User experience is always present. It’s not something you can skip now and do later. If you decide to move past the design-focused activities to the next phase of the project, you’ll create a Minimal Viable Product (MVP) with crappy user experience. User experience is present whether you design for it or not, and if you don’t take care of it, it will just get out of control.”
#2: UX Designers are Problem Solvers and Relationship Builders
If you want to offend a UX designer quickly, casually ask them to, “just make it pretty.”
UX design goes a LOT farther than simply making websites, apps, and the like attractive. We bring visual solutions to specific, real-world business problems. We do this by focusing on the touch points between the user and the company, and we build amazing relationships between the two.
A UX designer builds the company-to-consumer bridge by fostering growth in SEVERAL relationships. You’ll find that most UXers (I totally invented that term. Patent pending.) are pretty darn congenial, and there’s a reason for that. We have years of experience working with…
Because we love and work well with people, we garner a deep understanding of everyone’s needs. Even better, we know how to prioritize and give life to ALL of those needs. As a result, we create some killer-effective mash-ups.
Is there a need for a masher-upper on product teams? You better believe it. Without proper coordination, objectives would compete for room at the top, creating an amorphous mess of competing priorities. This, of course wastes endless time and money as companies gut the product over and over again, seeking that perfect balance.
Case #3: UX Designers Bring a Fresh, Highly-Trained Perspective
Henry Ford, the father of modern transportation, famously said, “If I asked my customers what they wanted, they would have said, ‘a faster horse’.”
In regards to products, it’s amazing how often customers AND companies fail to spot the forest for the trees. Both need someone who can step way, WAY back and offer the long view that they hadn’t even fathomed. For that, you need a freak.
UX designers have freakishly diverse backgrounds. We are…
…all in one. This multi-disciplinary grounding helps us see products differently, and this unique view helps us approach product development in innovative, eye-opening ways.
We can iterate, and iterate, and iterate—coming up with crazy, unheard-of solutions every time. The result is products that stand out in all the right ways.
Surviving in today’s ultra-competitive economy requires exactly that.
Case #4: UX Designers Boost Bottom Lines
In case you’ve missed the underlying current in the preceding points, UX designers SAVE and MAKE money for their clients.
How do UXers save money? Iconic architect Frank Lloyd Wright said it best: “You can use an eraser on the drafting table, or a sledge hammer on the construction site.”
Far too often, today’s products are a representation of ready-fire-aim mentality. Product creators push and push for a Minimum Viable Product that meets deadlines—then realize to their horror that users are retching on the monkey poop they’ve birthed. They quickly scramble to clean up the mess but not without massive loss of time and resources.
An early investment in user experience saves companies money in terms of endless re-thinks, re-writes and re-calculations. UXers accomplish this by:
-
- Creating viable, actionable product strategies
-
- Stripping unnecessary product features
-
- Clarifying product direction
-
- Decreasing development time
- And (you guessed it) a whole lot more
UX designers make money for companies by making products their customers love. Nothing is more meaningful to financial growth than a devoted, engaged customer base. An optimized product is the conduit for creating such customers. And the channel for an optimized product is??? Ding! Ding! Ding! The user experience designer.
Case in Proof
Well, I believe I’ve belabored the point sufficiently.
Or have I???
In case you’re one of those seeing-is-believing types, here’s a couple of fascinating UX Case studies I found:
Webcredible’s work for Dulux
London-based UX Agency Webcredible used the UX process to create a “65% increase in tester paint sales, 92% increase in Stockist searches, [and] 5,000,000 downloads globally” for paint manufacturer Dulux.
Slice of Lime’s work on Sphero
User experience design firm Slice of Lime used research, strategy, and design to help toy creator Orbotix boost sales of their Sphero toy. “Since launching the refreshed site. Orbotix has seen a 127% increase in page views, with users staying on the site 38% longer, and the overall bounce rate decreasing 17%.”
Let me end with a quote from legendary IBM designer Eliot Noyes: “Good design is good business.”
So yeah, UX designers are kinda ugly–but man o’ man do you need us. To learn about how you can get help from Software Technology Group’s UX designers, contact us. We’d love to hear from you.
By Neal Jenks
Design Consultant and IxD Practice Manager at Software Technology Group
