my favorite talk. Luke uses data to tell great stories. Luke pointed out how “obvious” design changes involve tons of thinking, planning and work.
Design is obvious in retrospect. Lots of work goes into making a design obvious.
More companies are moving to a bottom bar layout on mobile for three reasons:
- you can focus on core features
- grow critical engagement
Quantitative research tells you what happened and qualitative tells you why.
With hamburgers – you are presented with a mega menu list of choices. Overwhelming. With the rise of phablets, ergonomically a bottom menu is easier to use.
Below the fold isn’t the problem – the problem is that people don’t scroll when they think that the site ends. A problem with blocky boxy layouts.
Change makes ppl uncomfortable and the key to failure is to try and please everyone.
Products needs to have a point pf view – don’t blindly copy one or another.
Motion in Design Systems: Animation, Style Guides, and the Design Process – Val Head
Better animation communication
- shared vocabulary
- established animation values
- documentation and repeatability.
Storyboards and Sketches
- Where is the potentiual for animation in this flow?
- How can motion make this easier to understand.
- How do we animate between views logically?
- Quick iternations
- Anyone can make one – just need paper and pencil!
What to draw
Trigger —> Action —-> Quality (how does it happen)
Motion comps – Exactly how does this show how the animation works? Which item should move and when. Does the animation quality match our brand? Tools: Tumult Hype, AfterEffects, Adobe Animate.
Explore the details -> used to test out ideas and communicate deliverables
- Duration and delay values
- Details of the easing
- Repeat values, iterations
- Deliver the above variables.
- What will this interaction feel like?
- Does animation feel right in this context?
- How will animations interact with real data?
Define and Document – saving future you time and effort
Design Beyond our Devices – Ethan Marcotte
No more designing for pages or for patterns, design for principles.
Conversations about responsive web design lead to the same place: “Well, where are we going?”
- Mobile is still exploding
- Ride of tablets and phablets
- Post desktop investment – watches, fridges, whatever?!??!
Moving from page to patterns. A network of patterns that can be rearranged and moved.
Web’s inherent variability needs to lead to device agnostic content. In addition, 605 of mobile connection is less than 3g.
Desvice agnostic helps users with: hostile, crap browsers, tiny screens, slow networks, touch inputs.
Design for nonideal areas of use. Document your patterns.
- Visual hierarchy
- Pattern naming and conventions
- Translate inventory into HTML and CSS
Team style guide – language meaningful to your team.
from Krys Higgins’ sketchnotes
Thanks to a generous freelance client and some creative funding (i.e., my own money), I was able to attend An Event Apart in Seattle again this year. AEA is billed as a conference for “people who make websites” and continues to impress me. Working in higher ed means we are at least 3 to 5 years behind the curve, so this conference gives me a preview of issues to come and gives me tools, resources, and inspiration for for the road ahead.
I like the fact that there aren’t sessions to choose from – I’m introduced to issues and topics that I normally wouldn’t give a second thought. Like animations, or CSS!
From Research to Redesign: An Unexpected Journey – Jeffrey Zeldman
Design begin with the product.
Talking to stakeholders:
- what frustrates them?
- what would they do if they were in charge of the website?
- talking to stakeholders also gets them on your side!being appreciated, taking them seriously, they will feel invested in what you create.
Research (on other sites) allows us to identify patterns – and what’s working and what’s not. Also uncovers competitive advantages and reveals blindnesses and biases.
Research also saves $ – reveals problems and ensures we solve the correct ones. Allows us to understand market and prioritize high value customers , reveal goals.
Study your market AND your product – find your story
Different ways of engaging with your customers leads to more engagement!
This made me feel good: “Every website needs a lot of work.” Goals/audience are always evolving!
Making the human connection is the real value of research.
- Know your people
- Listen and ask questions
- Define success – where are we headed?
- Data galore – Data doesn’t provide the answers, just helps us find and refine the questions.
- Metrics of engagement – now and 6 months from now.
Practical Branding – Sarah Parmenter
No other session made me more wistful than this. Oh, to have the advantages of a true designer working on our brand… Sarah discussed what designing brands (including personal brands) looks like in 2016 in a practical, doable way.
Bring artistry back into design – no more waiting for permission to bring creativity back from big brands like Apple! I worry that if try anything different we could negatively affect user experience.
Branding is the product of deliberate conception – an unexplained emotional connection.
How do you stand out in a homogenized, blocky web? Research is great, but tends to be swayed by the most vocal people. Contradictions arise.
Work with a copywriter on the design brief. Voice and Tone is defined by the design and refined by copywriter.
Logo should be simple and memorable enough to draw in the sand with one toe (uhoh OSU)
Dominant color pairs really have an impact on the web.
from Practical Branding – Sarah Parmenter
With social – pick a lane – what makes the most sense for your brand?
Company values – they are a story that can help you define your brand.
Onboarding for Any Situation – Krystal Higgins
In this sense, onboarding mens getting your users ready to use your product/site.
Opportunities arise over time. There are diverse methods for onboarding and you can offer your users long term guidance.
Familiarize -> Learn -> Convert – > Guide them = leads to daily engagement. Days 3 -7 most critical.
Research at Google – Minimizing change aversion…
5 second test – what is this site about, what is it’s mission.
Onboarding is not a fixed path, rather it’s a different experience for all
Learn best by experience – experiencing something multiple times and modalities.
- Default experiences – starting to use the product, Strong IA.
- Inline guidance – weave information into content.
- Reactive guidance – happens when you trigger an action, signaled intent.
- Proactive Guidance –
- On Demand guidance – a centralized help area
Always looking for ways to make onboarding more accessible.
Start at the end – unveil those key actions, what ppl need to know. Learn from your core users (sustainers) and your unsuccessful users. Why did they bail?
Rachel DeLauder @rdelaude
How ARE people actually running their web teams in higher ed?
Rachel conducted surveys, 1 on 1 interviews to find out more
Most teams struggle to find balance and spend a lot of their time maintaining content.
Two types of web teams – MarComm based and IT based
Marcomm more slick, consistant with brand messaging
IT based more around load times, permissions, etc.
How can we improve: (these things make it better in an ideal world):
- Single leader who was held accountable
- Having an editor in chief
- Supported by web specialists who have a stake in the process.
- Distributed authors and SMEs that understand the goals and UX of the site.
Workflows in units by expertise, not by org chart.
SMEs to edit text, specialists to build pages.
Outsource hosting and maintenance.
Develop a “Lines in the Sand” matrix for the CAS Web Team (slide 46).
Infiltrate committee meetings
- We are not alone.
- Develop a matrix to show users.
- Convince units to assign web person based on interest?
- Keep track of working time to show leadership what we are actually doing?
This book is short, well written, and gives the reader a LOT to think about. I’ve been reading it in small bits because I end up taking so many notes.
Chapter 3 – The Process
The systematic inquiry for research:
- Define problem
- Select approach
- Plan and prepare research
- Collect the data
- Analyze the data
- Report results
(see Fig. 3.1 on page 39)
Base your definition on a verb that has an outcome – identify, evaluate, etc.
Your problem will point you to a style of research.
- problem statement
- who is performing what roles
- how to target and recruit
- incentive, tools and materials
Perform a screener to test possible participants – a simple survey that identifies:
- what are specific behaviors
- Level of tool knowledge and access
- what knowledge of the topic do they need?
*Usability testing is necessary, but not always sufficient*
It provides you with a story, predicts what may or may not be successful, pre Q&A testing, identifies which user tasks are important.
Good participants, good facilitation and good analysis is important – not a perfect usability lab setup. Real life isn’t conducted in a lab!
Analyze the data:
- Look for meaningful data
- Turn into observations, which will then turn into
Chapter 4 – Organizational Research
User-centered design considers client stakeholders part of the standard requirements.
Asking the same questions of different people will lead to understanding differences in motivation and understanding.
A stakeholder is a group without whose support the organization would cease to exists. Plan to:
- Neutralize politics (yeah, right)
- Understand priorities within organization
- Tailor the process to work methods
- Technical & business requirements
- Getting buy in
- Understanding how your work affects the organization
- Understanding the workflow
- Set agenda and send a few key questions ahead of time.
- Good questions on page 67 & 68
- Document attitude and they see as goal
Business requirement – a clear statement of what success will look like. What the doc should look like:
- Problem statement
- Gather ALL of the goals
- Success metrics
- Completion critera
- Scope (boundaries). Note what is OUT of scope.
- Risk, concerns, contingency plans
- Workflow diagram
- Add verbatim quotes for impact!
An Event Apart finished strong with three good sessions. I hope that I get to attend next year!
Unified Design – Cameron Moll
We need to work around to a unified experience around screens. Previous experiences inform new experiences.
The best interface is the one within reach, but 49% of users email themselves a link to continue using the content later.
RWD ends where the browser ends – the spirit of RWD but unified all technologies – Unified Design. This is the next frontier of building sites – a consistent experience regardless of where or what device the user is using.
77% of searches on mobile are at work or at home (where one assumes there is a desktop nearby).
Screens and interfaces are converging and your audiences are looking for unified experiences.Example: People want to use Lightroom on the phone – but it’s very resource heavy. But users get frustrated expecting Lightroom to work the same way it’s worked before, on desktop.
Unified Design is the next frontier, building on RWD – a consistent experience regardless of where/what device the user is using.
Design has told us that form and function is most important – function is becoming way more important than form.
The concept of data symmetry – same data across items because 40% of online users start activity on one device and finish on another.
Slack – a great example of a cohesive experience across devices.
Best practices that foster unity:
- Unify internet presence #unityfirst – design the core experience first.
- Treat every facet of the user experience as a contribution to the experience.
- Moving towards an duocratic branding experience (user decides).
- Consider web views for native apps – web vs native is mattering less and less.
- Unify actions, not devices.
- Store data in the cloud, not locally (amazon cart)
- Language choices starting to matter – replace the term “click” with select or point.
- Replace the term mobile (which ppl tend to think as iphone) with small, smallish. Think beyond the phone/ipad/desktop dichotomy.
- Eliminate big screen bloat.
Compassionate Design – Eric Meyer
Build for humans, not users or consumers.
Autotagging can go awry – put terrible tags on photos that people can not even be aware of.
Project pre-mortem – a meeting where discussions are happening about the worst outcome that can happen. How things can fail. A person serves as a dissenter – identify assumptions and subverts them. Everyone gets a turn as this dissenter, practice deep thinking.
If we’re going to do this *feature*, how can we do this ethically?
Instead of edge case, consider a “stress case”
It’s important to Signal Intent
- Google should have signal intent with mic drop feature.
- Explain what we are asking and why we are asking it.
You have to go off brand to be a human and be compassionate sometimes.
Clarifying intent behind questions: The Question Protocol.
- Who is going to use this info and why?
- What are we going to do with it?
Making the case for compassion in your work
Be conservative with what you send and liberal with what you select. Compassion can help you make money, save money and decrease risk. Compassion is hard – takes courage, willingness to accept users how they are.
Empathy with our users is courtesy. Compassion is vital.
Designing for Performance – Lara Hogan
My brain sort of checked out at the end of the conference and I didn’t take the greatest notes for Lara’s talk, unfortunately.
A cellular device must establish a radio channel before sending and receiving data. In this speed, mobile devices are roughly analogous to dialup.
Image file size tips –
Blur background to reduce file size, because jpgs don’t handle edges that well.
Image sprites – a bunch of images in one file.
Old IE downloads all @font-face files, so only import font weights you need.
3d Firefox add on to visualize page depth – Tilt 3D (I couldn’t get it to work).
Make performance part of everyone’s workflow.
oregonstate.edu over a cable connection. Site is usable at 2 seconds.
Resilience: Building a Robust Web that Lasts – Jeremy Keith
Lots of history of the DARPANET and ARPANET and Sir Tim Berners-Lee. I wrote a paper about this in grad school so it’s all sort of review for me, so I didn’t take any notes. I did enjoy, however, seeing Sir Tim’s paper about dealing with information management (aka the www), complete with notes from his supervisor:
html – originally 21 elements
html5 – now 121 elements. How do you add 100 elements to something and it still works?
Because browsers just ignore the elements that they can’t render – they’ll ignore the tags but still show the content. This is a declarative, more resilient tool.
html works well on the web because of the web’s inherent variability. We don’t know and can’t predict what browsers, interfaces networks, & user situations will look like in the future.
What we can do, going forward:
- Identify core functionality of a site (i.e. help users complete a task)
- Make functionality available with simplest technology
- Enhance Enhance Enhance
examples: Provide news (any newspaper), send messages (Twitter), send images (Instagram).
Adapting to Input – Jason Grigsby
Four truths about input
- Input is exploding – voice control, fingerprint sensors, etc etc.
- Input is a continuum – we’re device bending = and can no longer make assumptions based on screen size.
- Input is undetectable – we can’t tell within a browser what a user is going to do to input. Only can tell after the fact.
- Input is transient – just because I do one thing doesn’t mean I will do it again.
We need to adapt to input
- Design to the largest audience, by default
- Build it accessible – makes it easier for newer technologies to be adopted. See being resilient on the web!
- Design for multiple concurrent inputs because inputs aren’t binary. And…be more input agnostic in vocabulary.
***It’s time to retire “click here”**** We’re entering the era of pointer events – abstract contact with inputs.
Progressively enhance inputs – do the new cool stuff. Warby parker using the gyroscope, beacons instead of apps to control stuff in the future.
Make inputs part of your test plan. Your testing lab is the local Apple, AT & T and Verizon store.
Unfortunately, I had to miss Designing Meaningful Animation.
I was bursting with excitement because…Gerry McGovern! I am inspired by his work and his singular focus on solving user’s problems and identifying user tasks. I am the living heart eye emoji when it comes to him.
Top Task Management: Making it Easier to Prioritize – Gerry McGovern
How can we get the information to you as soon as possible Google is about solving problems for you.
i.e. search results – to the info shown IN search results – to the info showing up in the URL.
When you understand the task the speed and expectation becomes faster.
Interesting test results – whichtestwon.com
Smart people sitting in a room – worst way to design a website. There is a huge difference between looking at and using a website. Preferring vs using – a gut instinct isn’t good to listen to.
***Tiny traffic is where the ego lies in an organization*** As if most people care what an organization says about itself. All this tiny traffic garbage damages users getting to actual tasks.
Organizations are really good at getting in the way of people doing what they need.
The most skill we can have is understanding our customer’s needs. Move away from ego towards empathy.
Marketing is like antibiotics; we’re becoming immune to it. More cynical to messages. Brand value is in decline and customer value is rising fast. Consumers and users are less and less trusting of messages.
- customer base, intelligence
- trust moving away from orgs, moving towards friends and me.
Identify those tasks
- Top 50 search terms
- To 50 pages, files (PDFs count too!)
- Trad. media
- Emails – what are your customers emailing you about?
Discover the user ecosystem, instead of yours.
Web teams must manage the tasks – outcomes as well as components. When identifying tasks, teams must establish target times for completion.
Constantly improving and iterating – digital is never static. Always measure your tasks and environment.The distance between users and org is farthest in digital, and most crucial to understand.
The Physical Interface – Josh Clark
Interfaces are requiring us to be more robotics instead of interfaces being more human.
Interest lies in the mundane technologies (like auto car windows), them becoming:
The best interfaces translate intent into action. Mobile gives computing power to immobile devices through bluetooth – everything can be a sensor (diapers, asthma inhalers..)
What if a physical store could do what a online store does? Amazon’s physical store is the start of this. You could touch the product for more info, walk out of the store to buy it (just like Food Innovation Center’s RFID project!)
Where is the universal connector network? The physical web, broadcasting its interface -> like broadcasting a URL. (we could do this for user test screening!)
Objects should speak only when there are important things to say – goal is not to make things talk but to improve the conversation.
We’re moving into surveillance capitalism – at what point are we no longer controlling objects and are being controlled by them (ie. Siri teaching us to say names in a weird way). Our values amplify our humanity.
The Ethical Design Manifesto – check that they values of your creation bend to your lives.
Hello from Day 1 at An Event Apart Seattle. We got lunchboxes as swag – my kid will be thrilled.
Designing with Web Standards – Jeffery Zeldman
He started out the talk describing problems we are all facing – 1000s of devices, folds and feeling like a fraud and insecure because he can’t keep up with code, the new tools and the new things to do.
Do we need CSS? We can do it all in a JS framework! But scripts fail.
Bloat then – Dw
Bloat now – Bootstrap (“Using MS Word to send a text message”). Bootstrap’s a great way to prototype, not good for production code.
Modern web standards bible- Adaptive web design by Aaron Gustafson
Your brand happens between devices. CSS flexbox makes it easier to separate layout from presentation.
The people writing the CSS need to be talking to each other
- Make style guide
- Hire a code design director.
Rules for designing with web standards:
- Content & structure 1st
- Remove distraction. Design is 90% typography and 90% whitespace
- Design system to serve content
- Style is servant to brand and content
- Speed is very important
- Design to make user clever.
Designing Deliberately – Yesenia Perez-Cruz
Some of my really sharp coworkers have been talking to me about performance for over a year. Now I really get it.
Performance is a design feature. Prioritize performance from the beginning.
Beauty and usability are in balance. The goal is to deliver core content quickly, by being deliberate with design choices.
Three stages of the design: Core > Enhancements > Leftovers
A user’s perception of when the content was usable (readable) is more important than actual load time.
Ways to make performance a priority…
- Make performance a project goal. Good for users (keeps em happy and coming back) which is good for business.
- Set a performance budget – a tangible way to talk about speed. Every design choice has consequences. “That carousel will cost you 700kb”. Performance budget builder
- Videos are great for showing speed.
- For every design decision, we must ask – what value does this choice provide?
- When performance guides design decisions, decisions are made less arbitrarily.
- Performance budgets help us design deliberately. Web fonts are overused and that comes at a cost. Do you really need web fonts for smaller screens?
Consistency does NOT have to mean identical – a singular design expression, never uniform or static.
The bad part about brand guidelines are that they can be too rigid – time to think about brands in more flexible ways.
A new web strategy – Start with clean experience, then layer on brand experience.
Designing modularity is a precursor to style guides. Identify reusable patterns and use only what you need. Think modularity to differentiate just enough.
cssstats.com – How many styles do we have?
Oregon State University: 34 unique colors, 53 unique background colors (total redundancies here), 12 font families, 33 font sizes (!!!)
Real Art Direction on the Web – Jen Simmons
I probably understood this session the least, but I understood enough to get excited about some of the possibilities!
Bootstrap and 960 Grid system is the reason that websites all look the same today. Turned web layouts into a multiple choice question.
Break away from that –
- Use negative space as a way to guide the eyes. Communicate using space. Create an oasis.
- Get off the grid design.
- Use odd number instead of even number of columns – gives you a different look.
- Give the users with the latest browsers great experiences – don’t kidnap everyone and hold them in IE 8-land.
Viewport units – sizing things relative to the viewport size
Object-fit – controls the size of the box and adjusts the aspect ratio of the units.
Clip-path – breaking out of squares and rectangles.
Css-round – can’t really be used yet (browsers aren’t supporting). Using polar positioning to determine angle and distance.