with strategy, proceeds through vision, takes shape through research, becomes real with personas, workflows and wireframes, and is validated and improved with usability testing. UX contributions work best when they’re baked in from the beginning: you can’t add them at the end. BarCamp Nashville :: October, 2014 :: @lauriekalmanson
:: October, 2014 :: @lauriekalmanson Product requirements Developer resources Scope Time Budget User research and discovery to create personas Workflows based on user types: Usability testing Interface sketch and interaction design Wireframes: Usability testing Mockups: Usability testing Prototype/Launch: Usability testing UX process Happy place Business process
:: October, 2014 :: @lauriekalmanson The engineer thinks about the motor. The driver steps on the gas. How data works is not how the user experience works.
Storyboards Content strategy Engagement architecture Information architecture Wireframes Interaction design Visual design Usability testing Mockups Prototypes Interviews, surveys, customer data Types of users you will build paths for Steps toward goals How those steps will work on the screen What the words will say; size, breadth, depth Social media: sharing, return visits, membership Categories, subcategories, topics, sorting Sketches that put these pieces together How it all goes; click, and then what happens? Look and feel Test early, test often: workflows through wireframes Layer visual design on tested wireframes Clickable, with real or fake interaction points User experience work, in order. Get these steps right to be successful
prelude to wireframing Step 1 Happy path for user type 1 Step 2 Step 3 Step 1 What happens on the screen Storyboard for happy path for user type 1 Step 2 What happens on the screen Step 3 What happens on the screen
Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Requirements :: Usability.gov http://www.usability.gov/how-to-and-tools/methods/requirements.html • Business Requirements: Alignment with the bottom line; define success in advance so you have metrics and markers. • User Requirements: Alignment with user needs and user success; user expectations, goals, needs and wishes • Creative Requirements: Branding, look and feel, voice, tone. • Functional Requirements: How it works; in partnership with development team.
Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Personas :: Usability.gov http://www.usability.gov/how-to-and-tools/methods/personas.html • Express major needs and expectations of key users • Present expectations, needs, desires, goals • Describe real people: demographics • Research: Present users, future users
Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Information Architecture :: Usability.gov http://www.usability.gov/what-and-why/information-architecture.html • Hierarchies, and structures: What are things called, and where do they go? Sweaters/knitwear? How many kinds of shoes/heels/sneakers/boots? • What is the common vocabulary of users, not the lingo of insiders? Clothing is apparel only to those in the business. • Card sorting exercises: Test the naming of things with users.
Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Content strategy :: Usability.gov http://www.usability.gov/get-involved/blog/2013/11/creating-cross-channel-experiences.html • What does the content need to say, to which users, accomplishing what tasks? • What is the strategy across channels: web/mobile? • Who structures/categorizes/creates/edits/publishes content? • Content strategy includes help/documentation content.
Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson Wireframes :: Usability.gov http://www.usability.gov/how-to-and-tools/methods/wireframing.html Wireframes are a tool to prove out a concept, from sketching on a whiteboard or with paper and pencil to using tools like Omnigraffle or Visio. Showing users black and white concepts allow you to separate the beauty of a finished look and feel from the functionality of a user path. • Low-fidelity wireframes: Big concepts, main interactions, few details. “Does this make sense?” A starting point for proving out a concept with cross functional teams, and with users • High-fidelity wireframes: Further down the development cycle, when iterative rounds of concepts and testing are underway, add details and interactions, until you get to something that looks like a black and white version of a final product,
Tools and techniques What are the tools to use to know if business needs and user needs are in alignment, and users can accomplish their goals? BarCamp Nashville :: October, 2014 :: @lauriekalmanson User Interface (UI) :: Usability.gov http://www.usability.gov/what-and-why/user-interface-design.html The User Interface -- UI -- is the structure the user sees: the interactions, the buttons, menus, links, frames and sequences; in mobile, the complexity expands to include the motions, swipes, and taps. • Click, type or tap: Buttons, fields, checkboxes, radio buttons, drop down lists • Navigation: Categories, subcategories, breadcrumbs, pagination • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows • Expand/Collapse: Accordions, tables, data grids
lauriekalmanson
shimastripe
kaminashi
ryosukeigarashi
cyberagentdevelopers
kimujun
minorun365
recruitengineers
emiki
10xinc
kazuhitotakahashi
uhyo
takumiogawa
aleyda
keavy
kneath
holman
vanstee
jnunemaker
bkeepers
morganepeng
bluesmoon
eileencodes
jacobian
phodgson
