Design & User Centered Practices Shelby Morgan NCDB Staff Meeting 2017

Purpose Best practices for design & user experience/interface Growing body of knowledge around website design and user experience Brief tour of concepts Familiar to you Over the last day we have defined, reviewed who are users are and what our content is. Now let’s look at best practices around web design and user experience/user interface. So that when we look at examples you have context for your thinking and you understand terms.

Design Defined Design exists to solve problems Whether it is a bridge, products or websites Often in ways that are small or subconscious Good design is invisible End user always at the forefront of design More than just aesthetics Good design is when you experience whatever is being presented to you. It is simply usable and straight forward. You do not have to google how to use it.

4 Basic Principles of Design Contrast Created when two elements are different. It creates effect and dynamic. Seems simple but it is important and often overlooked. Must be strong in order to be effective. Ex: Using bold. Repetition Repeating elements like colors, shapes, textures, lines, fonts. Alignment Purposeful placement of elements. Connection between elements on the page. Nothing floating, etc. This creates cohesion. Proximity Related items grouped together. Appropriate organization of information placement.

Website Design Definition Web Designer vs. Web Developer Web design governs everything involved with the visual aesthetics and usability of a website—color scheme, layout, information flow, and everything else related to the visual aspects of the UI/UX (user interface and user experience). Web Designer vs. Web Developer Web design is concerned with what the user actually sees on their computer screen or mobile device, and less so about the mechanisms beneath the surface that make it all work. Through the use of color, images, typography, layout and interaction they bring a digital experience to life.

Website Design Iterative within confines Style Guides and Principles to make decisions by Promote consistency and cohesion Brand Identity Content is important “Content precedes design. Design in the absence of content is not design, it’s decoration.” -Jeffrey Zeldman Jeff and Elizabeth will get to specific details later in the day about web design and what we currently have. Iterative not for the sake of change but refinement based on what we know and discover about users.

User Experience User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services. Useful: Your content should be original and fulfill a need Usable: Site must be easy to use Desirable: Image, identity, brand, and other design elements are used to evoke emotion and appreciation Findable: Content needs to be navigable and locatable onsite and offsite Accessible: Content needs to be accessible to people with disabilities Credible: Users must trust and believe what you tell them

User Centered Design Process Design is based upon explicit understanding of users, tasks, and environments driven and refined by user-centered evaluation addresses the whole user experience The process involves users throughout the design and development process and it is iterative. There is a growing base of literature around cognitive science and the behaviors of humans around internet patterns. Social Media, twitter and facebook have all been influencers on the pattern of behavior for which people consume information.

User Centered Design Process: Phases Specify the context of use: Identify the people who will use the product, what they will use it for, and under what conditions they will use it. Specify requirements: Identify any project requirements and user goals that must be met for the product to be successful. Create design solutions: This part of the process may be done in stages, building from a rough concept to a complete design. Evaluate designs: Evaluation - ideally through usability testing with actual users - is as integral as quality testing is to good software development. Context of use - 30% of hits come from a mobile device. We need to think about how they are using our website. We did extensive usability When you do user centered design, you are getting information about what would best meet the need and not what we think meets the need.

Persona Purpose of Building a Persona To create reliable and realistic representations of your key audience segments for reference. Personas help to focus decisions surrounding site components by adding a layer of real-world consideration to the conversation. They also offer a quick and inexpensive way to test and prioritize those features throughout the development process. In addition they can help: Stakeholders and leaders evaluate new site feature ideas Information architects develop informed wireframes, interface behaviors, and labeling Designers create the overall look and feel of the website System engineers/developers decide which approaches to take based on user behaviors Copywriters ensure site content is written to the appropriate audiences Context of use - 30% of hits come from a mobile device. We need to think about how they are using our website. We did extensive usability When you do user centered design, you are getting information about what would best meet the need and not what we think meets the need.

Persona Activity

References Frost, B. (2016). Atomic design. Pittsburgh, PA: Brad Frost. Larson, M.B., Lockee, B.B. (2014). Streamlined ID: A practical guide to instructional design. New York, NY: Routledge Reynolds, G. (2014). Presentation zen design: A simple visual approach to presenting in today’s world. Berkeley, CA: Peachpit Press. Shiotsu, Y. (no date). Web design vs. web development. [Web article]. Retrieved from https://www.upwork.com/hiring/development/web-design-vs-web- development/ Williams, R. (2008). The non-designer’s design & type books, deluxe edition. Berkeley, CA: Peachpit Press. Usability.gov (no date). User-centered design basics. [Web article]. Retrieved from (https://www.usability.gov/what-and-why/user-centered-design.html