Front-end Development
I realized that in order to really know whether our work is any good, we need a higher level of principles that can be used as a measuring stick for implementing design. We need something that is removed from a specific language like CSS or an opinionated way of writing it.
The Nine Principles Of Design Implementation
- Structured: The document is written semantically and logically, with or without styles.
- Efficient: The least amount of markup and assets are used to achieve the design.
- Standardized: Rules for common values are stored and used liberally.
- Abstracted: Base elements are separated from a specific context and form a core framework.
- Modular: Common elements are logically broken into reusable parts.
- Configurable: Customizations to base elements are available through optional parameters.
- Scalable: The code is easily extended and anticipates enhancements in the future.
- Documented: All elements are described for others to use and extend.
- Accurate: The final output is an appropriate representation of the intended design.
Inclusive Design
They aim to give anyone involved in designing and developing websites and applications – designers, user experience professionals, developers, product owners, idea makers, innovators, artists, and thinkers — a broad approach to inclusive design.
- Provide comparable experience: Ensure your interface provides a comparable experience so people can accomplish tasks in a way that suits their needs without undermining the quality of the content.
- Consider the situation: People use your interface in different situations. Ensure your interface delivers a valuable experience to people regardless of their circumstances.
- Be consistent: Use familiar conventions and apply them consistently.
- Give control: Ensure people are in control. People should be able to access and interact with content in their preferred way.
- Offer choice: Consider providing different ways for people to complete tasks, especially those that are complex or non-standard.
- Prioritise content: Help users focus on core tasks, features, and information by prioritizing them within the content and layout.
- Add value: Consider the value of features and how they improve the experience for different users.
Exclusive Design
Where Inclusive Design is about designing for everybody in every context, Exclusive Design is for those of us who do not know everybody in every context yet.
The Exclusive Design Principles
- Study Situation: We work with one real person with a disability and closely observe how they react to our design.
- Ignore conventions: If it turns out during our tests that the conventions/guidelines/best practices aren’t good enough, we improve them.
- Prioritise Identity: We get to know the person we work with closely and soak our design, process and organisations with their identity.
- Add Nonsense: We explicitly allow crazy/weird/uncommon/uncomfortable ideas to flourish. That’s where the unknown things are hidden.
Web Development
As web developers, we are responsible for shaping the experiences of user’s online lives. By making ethical and user-centered choices, we create a better web for everyone.
Principles of Ethical Web Development
- Web applications should work for everyone
- Web applications should work everywhere
- Web applications should respect a user’s privacy and security
- Web developers should be considerate of their peers
JavaScript
I want to introduce 7 actionable principles for websites that want to use JavaScript to control their UI.
7 Principles of Rich Web Applications
- Server-rendered pages are not optional
- Act immediately on user input
- React to data changes
- Control the data exchange with the server
- Don’t break history; enhance it
- Push code updates
- Predict behavior
Drupal
An open-source content management platform.
Drupal 7 User Experience Project
- Make the most frequent tasks easy and less frequent tasks achievable.
- Design for the 80%
- Privilege of the Content Creator
- Make the default settings smart
Foodspotting
Instead of reviewing restaurants, you can recommend your favorite dishes and see what others have recommended wherever you go.
- It’s about dishes, not just restaurants
- It’s visual
- It’s positive
- It’s global
It’s what enables us to debate whether something “Is Facebook” or “Isn’t Facebook,” it’s what allows us to evaluate whether anything we’re designing could be improved.
- Universal
- Human
- Clean
- Consistent
- Useful
- Fast
- Transparent
Medium
It’s never too early to talk about principles for your product. They can feel premature because they’re not typical signs of progress, such as mocks or prototypes. Nevertheless, if written correctly, you’ll be surprised at how often they will come up in conversations during new employee onboarding, design critiques, and brainstorms.
Creating useful design principles
- Direction over Choice: This principle was often referred to while designing the Medium editor. We purposely traded layout, type, and color choices for guidance and direction. The direction was more appropriate for the product because we wanted people to focus on writing, and not get distracted by choice.
- Appropriate over Consistent: This might seem controversial, but when applied across devices, its purpose is clear. We were willing to break consistency if it was more appropriate for the OS, device, or context.
- Evolving over Finalized: This is exemplified in the ability to share Medium drafts, write responses, and leave notes. The content on Medium should be antifragile, improving with use and evolving overtime. We did not want to design printed books for the internet.
Mapbox
After a few weeks sketching and debating, we stepped back and created some simple design principles before moving forward.
- Interaction is the basic unit of design.
- Transitional interfaces are easier to learn and more pleasant to use.
- Interactions should be delightful and surprising.
- Focus the user on one primary action at a time.
Firefox
Is what we’re making a clear expression of what it means to be Firefox? What will make it more Firefoxy? What will we not do because it’s not true to Firefox?
- Takes care of you ◦ user-sovereignty ◦ default to privacy ◦ no surprises ◦ actionable advice
- You help make it ◦ research gives a voice to our non-core community ◦ start people with smart defaults ◦ implicit as well as explicit customization ◦ invite people to be more than users
- Plays well with others ◦ user control and choice ◦ simple to use the services you choose ◦ suggest ways to get the most out of the web
- Exuberant ◦ feels like there is a person at the other end ◦ fun tools are easier to use ◦ humour and whimsy ◦ have a point of view
- Finely crafted ◦ see also our visual design guidelines ◦ continuity of look and feel across platforms ◦ perceivable quality is vital
- Global ◦ global means local and local and local
- Balances power and simplicity ◦ 80/20/2: default to surface minimalism and easy access to the rest ◦ user-agency and understanding, not just less
- Makes sense of the web ◦ focus on real human tasks and contexts ◦ many real tasks involve a browser and other tools ◦ quick access to your stuff and web ◦ no jargon
- High user-performance ◦ performance is objective, but responsiveness is subjective ◦ a happy user performs better
Windows
- Reduce concepts to increase confidence
- Small things matter, good and bad
- Be great at “look” and “do”
- Solve distractions, not discoverability
- UX before knobs and questions
- Personalization, not customization
- Value the life cycle of the experience
- Time matters, so build for people on the go
Windows Apps
- Pride in craftsmanship
- Do more with less
- Fast and fluid
- Authentically digital
- Win as one
Android
These design principles were developed by and for the Android User Experience Team to keep users’ best interests in mind. For Android developers and designers, they continue to underlie the more detailed design guidelines for different types of devices.
- Enchant Me
- Delight me in surprising ways
- Real objects are more fun than buttons and menus
- Let me make it mine
- Get to know me
- Simplify My Life
- Keep it brief
- Pictures are faster than words
- Decide for me but let me have the final say
- Only show what I need when I need it
- I should always know where I am
- Never lose my stuff
- If it looks the same, it should act the same
- Only interrupt me if it’s important
- Make Me Amazing
- Give me tricks that work everywhere
- It’s not my fault
- Sprinkle encouragement
- Do the heavy lifting for me
- Make important things fast
Android Wear
These design principles provide some simple heuristics about how you should plan and assess your Android Wear app design.
Design Principles for Android Wear
- Focus on not stopping the user and all else will follow
- Design for big gestures
- Think about stream cards first
- Do one thing, really fast
- Design for the corner of the eye
- Don’t be a constant shoulder tapper
Google Glass
Glass is fundamentally different than existing mobile platforms in both design and use. Follow these principles when building Glassware to give users the best experience.
- Design for Glass
- Don’t get in the way
- Keep it relevant
- Avoid the Unexpected
- Build for people
Harmony by Intuit
Our vision is to create a cohesive, multi-device user experience that unites Intuit’s small business products.
- Be simple, easy to use, and guiding.
- Establish a familial resemblance.
- Maintain user context by staying in place.
- Guide the user where appropriate.
- Design for the customer and instill confidence.
- Be trustworthy and helpful.
- Imbue confidence.
- Establish modern and iconic ownable moments.
- Define a standard personality.
- Celebrate unique tasks.
- Project a voice.
- Define ownable visualizations.
- Celebrate data while respecting user and device context.
- Be smart and appropriate for the task at hand.
- Understand the broader contexts of use.
Arch Linux
The following five core principles comprise what is commonly referred to as the Arch Way, or the Arch Philosophy, perhaps best summarized by the acronym KISS for Keep It Simple, Stupid.
- Simplicity: Arch Linux defines simplicity as without unnecessary additions, modifications, or complications, and provides a lightweight UNIX-like base structure that allows an individual user to shape the system according to their own needs. In short: an elegant, minimalist approach.
- Code-correctness over convenience: Simplicity of implementation, code-elegance, and minimalism shall always remain the reigning priorities of Arch development.
- User-centric: Arch Linux targets and accommodates competent GNU/Linux users by giving them complete control and responsibility over the system.
- Openness: Arch Linux uses simple tools, that are selected or built with openness of the sources and their output in mind.
- Freedom: By keeping the system simple, Arch Linux provides the freedom to make any choice about the system.
Web Design
What principles do designers need to understand to create better designs?
Front-End Principles for Designers
- Let go of control
- Avoid too much variation
- Keep performance in mind
- Understand source order
- Know your numbers
- Let content determine breakpoints
- Maintan consistency
- Communicate early and often
Moo.com
I wrote these up just before I left MOO I think.
‘MOO.COM UX rules’ – circa 2008
- Optimise for the common case
- Build tools that focus on meeting one simple need
- Build tools for users without experience
- Users needs are not always the same as the features they ask for
- One action per page
- Context is more important than consistancy
- Optimise for average user’s return rate
- Make pages functionally readable
- Only tell people things once per page
- Contextual help is best
- Let people teach themselves
- Keep the user path as short as possible
- Make decisions for people
- Make people confident in their actions
- Pages make sense before and after action
- State should always be maintained between pages
- Make sure pages content can be linked to forever
Wayfindr Open Standard
Designing for vision impaired people
These principles provide guidance about:
- The design and development process of a way-finding and digital navigation system for vision impaired people.
- The high level thinking for creating audio instruction.
- The usage of sound in a way-finding system for vision impaired people
- Involve users in the process
- Focus on the environment not the technology
- Use simple and concise messages
- Use active words
- Provide reassurance information
- Provide an instruction at every decision making point
- Provide different techniques for diagonal directions
- Provide auditory cues
- Divide the route into clear segments
Malleable Systems Collective
For all of these principles, it is not yet clear how to best achieve them, and there are sure to be many possible solutions with different tradeoffs. We’ll need to experiment as community with various approaches. The collective’s primary goal is to report on such efforts and raise awareness of work in these directions.
- Easy to change: Software must be as easy to change as it is to use it.
- Arbitrary recombination and reuse: All layers, from the user interface through functionality to the data within, must support arbitrary recombination and reuse in new environments.
- Open-ended potential: Tools should strive to be easy to begin working with but still have lots of open-ended potential.
- Retain ownership and control: People of all experience levels must be able to retain ownership and control.
- Freely sharable: Recombined workflows and experiences must be freely sharable with others.
- Modifying in the context of use: Modifying a system should happen in the context of use, rather than through some separate development toolchain and skill set.
- Thoughtfully crafted: Computing should be a thoughtfully crafted, fun, and empowering experience.