CSS Preprocessors are tools that allow front-end web developers to write CSS (the language for styling web pages) using variables and other logic that programming languages use. Many contemporary developers use them in every project and swear by their usefulness, while others are less enthusiastic.
While there’s little argument that tools like Sass, LESS, Stylus (and others) allow for things that plain CSS does not, there is room for debate as to whether those things are good and useful.
Pro-Preprocessors (Vince Speelman)
- It won’t make you a better developer
- saves time
- saves effort
- saves space
- it’s fun
- writing good / big css is complex
- output remains complex
- source is simplified
- files are modular and digestible
- patterns can be taught to devs of any calibre
- may or may not complicate workflow
- allows you to do more if you want to
- math: I hate it
- grids (singularity grid system)
- vertical rhythm
- modular scale
- thinking: I don’t want to waste it
- sassy buttons
- big: huge helpers
- fast changes
- break up files
- separate concerns
The case against preprocessors (Brad Czerniak)
- The dependencies, syntax, and features-by-keyword of preprocessors all necessarily add complexity rather than reduce it
- Sass and other preprocessors have features that make bad practices look attractive and easy-to-do, and the ugly result isn’t something you’ll necessarily look at
- Convenience features of Compass and other libraries are a poor substitute for knowing what the CSS is actually doing
- While some tasks are quicker with variables, setting them up will always (always always always lol) be touching n+1 more places than doing it the regular CSS way
At our August 2013 meeting, Refresh Detroit welcomed Jodi Bollaert and Megan Schwarz of Team Detroit, who shared their insights on fast and inexpensive user experience research.
Attendees included web designers, developers and user experience professionals who came from metro Detroit and Ann Arbor to learn about online and in-person research methods to improve their projects.
Thank you Team Detroit for the refreshments, hosting the meeting and for your support of Refresh Detroit events. It was our first time meeting at Team Detroit, and it was a great venue!
Notes from the Presentation
Before beginning user experience research, what do you want to learn? With over 100 user experience tools, how do you choose the best tool? It helps to identify:
- Who is your target audience?
- What will you test?
- What’s your budget?
Challenges we face today with user experience research: three times as much to test (desktop, mobile, tablet) and short project lifecycles. Traditional testing can take up to two weeks to get the report. Web-based tools (like UserTesting.com) enables teams to do research at lower cost and less time, with fewer resources.
Why use UserTesting.com?
- You need findings quickly (within hours)
- Test can be completed in 15 minutes
- If audience can easily be recruited online
- Site is available online
- Have resources available to do the tests, review the videos, take notes and report
- Budget is a concern
Using unmoderated testing with Usertesting.com, you’ll be able to:
- Test five people
- Do remote research
- Only spend 15 minutes
- Get results in an hour
- Keep cost to ~$250 on average
For mobile testing, Usertesting.com sends cameras to participants.
Analysis and Reporting
- The team doing design and development, get the results within hours
- Developed a UT report template – focused on actionable findings, including a few video highlights to underscore key themes
- Deliver report in person (usually a few days later since it can take three to four days to review five videos, create report)
- Offer chocolate and caffeine to encourage team members to attend
- Watch videos together
- Practice active observation
- Each team member documents key insights on sticky notes, one per note
- Post stickies on wall, work together to sort out
- Avoid leading questions
- Run a pilot test with one participant before launching the full study
- Check that duration is about 15 mintues
- Ensure your directions and questions are understood
- Participant no good? Usertesting will find another one quickly for you
Even Cheaper Tools
5 Second Test
- Offered by Usability Hub
- Find out what users recall about your design
- Free with Karma Points (which you get by participating in tests) or monthly subscription pricing
- Easy to set up
- Upload screenshots
- Add brief instructions
- Use default questions or customize for your needs
- Example shared: Team Detroit home page
- 5 second test showed that users didn’t know what Team Detroit was about (was it cars? Detroit)
- Updated home page to clearly identify what Team Detroit does
Click Test (Usability Hub)
- Discover what users will click on your site
- Upload screenshots, write task, specify number of clicks
- Method to help you organize content on a site
- Example: videos for Ford site. Users asked to group content and write labels once all cards were grouped.
- Card sorting resource from Boxes and Arrows
- Consider Websort for online card sorting. Free for under 10 users
- Qualitative research method
- One-on-one conversations
- Identify what your users’ needs are and why
- Do-it-yourself user experience research will be used more often, but won’t replace traditional research
- Talk to project teams. Find out their pain points. Get them involved in planning and observation.
- Test early, test often
- Test up to launch, test after launch
- Share results when you get them (don’t wait)
- Document findings & facilitate next steps
- Be careful what you wish for! People get excited and want to do more. You’ll soon discover you need more bandwidth.
- Just do it!
We’re hoping to have a link to Jodi and Megan’s slides soon. We’ll update this post when the slides are published online.
In January we were lucky enough to have Steve Tengler give a talk to a joint meeting between Refresh Detroit and the Michigan Usability Professionals’ Association.
His talk built off his ongoing series of articles which explore user experience lessons from actors:
Although Steve couldn’t share his slides here are the 25 UX lessons he demonstrated that we can learn from Hollywood.
The 25 UX Lessons From Hollywood:
- Rain Man: Social Media Ratings of UX Can be Powerful (“Kmart Sucks!”)
- Mission Impossible: Arrange your User Interface Around Urgent Tasks
- Minority Report: Design Your System with a Multimodal Interface
- Top Gun: Design for Human Error Upfront
- Risky Business: Style Captures Attention
- The Green Mile: Task Completion Doesn’t Automatically Equate To Success
- Cast Away: Fictional Personas Can Bring Sanity to the Project
- Bosum Buddies: Re-Skinning Can Allow Financially-Advantageous Reuse
- Da Vinci Code: Complicated Interfaces Have Their Purposes Too
- Forrest Gump: Exceeding Expectations Makes You Memorable!
- Jurassic Park: The Details Are Surrounded by Dung
- October Sky: Have Faith in Iterative Testing
- Recount: Statistics Can Be Both Powerful and Dangerous
- Blue Velvet: Investigations Can Go Too Far
- Meet The Fockers: Understand the Financials of Personalization
- Pirates of the Carribean: It’s Not About the Ship You Rode In On
- Edward Scissorhands: Plan Ahead for Assimilation
- Alice in Wonderland: Flexibility on Size Helps Win the Battle
- What’s Eating At Gilbert Grape: Design for What Your Customer Wants
- Alice In Wonderland: Tremendous Flexibility Can Lead to User Satisfaction
- Bruce Almighty: Silent Analytics Can Help Tailor Your UX
- Man on the Moon: Know the Business Side of your Business
- Mr. Popper’s Penguins: Watch Out for the X+1 Factor
- Horton Hears a Who: Don’t Forget The Minority Might be a Captured Market
- Batman Returns: Be Flexible on Emerging HMI
If you have a chance to see Steve talk, take it. He is engaging and has a great insight in to user’s needs. We were grateful to have him and invite him back any time.