Manager, User Experience @amster, [email protected] I’d like to talk to you about how interactive prototypes are a great tool for us to make better design decisions than previously with static mockups.
of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Organization Lenses of Information Change State / Context Separate Groups Storytelling A watch is an example of a complicated machine. The Layout, Data, Controls, Color, and Choreography are things which are exposed to the user to tell the story about the current state of the machine.
Analytics Community Marketing Service IoT Sales Multitenant Cloud USER EXPERIENCE CLOUD DATA Salesforce stores massive amounts of categorized data in the multi-tenant cloud, and uses the cloud platform to create meaningful data sets, and that’s revealed to the user via an application layer across a wide variety of devices. As UX professionals we craft the user experience in the top half of this architecture.
Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Salesforce data is grouped by object type, in this case Accounts, Contacts, and Opportunities. Here is a simplistic view of 3 account records, 3 contacts, and 3 opportunities.
Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Let’s say you want to get Info 2 (e.g. a phone number) from the GenePoint account. You would 1) log into Salesforce, 2) navigate to Accounts, 3) click on GenePoint to view its record, 4) navigate to the piece of info you’re looking for. If Salesforce were a simple tree organization, you might be able to optimize the UI for a tree hierarchy.
Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 However, a lot of Salesforce’s power comes from each record having relationships to other records. You can endless browse “sideways” going from a record to its related records.
Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Imagine trying to render a meaningful breadcrumb trail after performing navigation such as this. These are the things that are hard to capture in static mockups and are better suited for interactive prototypes.
Generators United Oil Installations GenePoint Pyramid Construction Inc. United Oil & Gas Company Contact Account Opportunity Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 Info 1 Info 2 Info 3 WHERE AM I? WHAT STATE AM I IN? WHERE CAN I GO? As UX/IA people we need to create a logical framework to explain to our users the state of the machine.
of the user’s navigation. Here we are looking at an Opportunity object we got to from the Closing Next Month list of opportunities. Its name is “Pyramid Emergency Generators”. It is associated with an account, Pyramid Construction Inc., and it is in the Needs Analysis state.
I DO? This last bit is around telling the user what they can do next. In statics this becomes more complicated: if you click Mark Stage as Complete then a modal pops down and if the user says yes then animations happen. Or if you click Closed then the Mark Stage as Complete changes its text to Select Closed Stage, and if they click then the previous workflow happens.
use statics you might think that you’ve accounted for the entire scope of the problem. You could find a way to explain some of the complex interactions in a spec. And maybe you think you can get away without using interactive prototyping.
by the end-user. When you first go to this Opportunity Workspace the IA is what you might consider an “opinionated UI”: it is our (Salesforce’s) recommendation for the best user experience.
their organization. (That end-user is an administrator, btw.) And so interactive prototyping lets us play with the IA and see how it behaves in different layouts or configurations.
imagine that you make a static mockup of this UI and you assume the clickable link is always the Name. But you have to consider that the user can rearrange the columns as they please so how might you tell the user they can click on the row when there is -NO- link visible?
CHOREOGRAPHY INTERNATIONALIZATION / LOCALIZATION / RTL DEVICES ACCESSIBILITY And such is the multidimensional problem that is so hard to capture in statics or linear workflow mockups like in InVision or Flinto.
UX AT SALESFORCE • LIGHTNING DESIGN SYSTEM • PROTOTYPING SETUP We use interactive prototyping as one of our better tools to explain complex interactions.
TOOLBOX As I said, interactive prototypes are just one tool the UX designs and engineers have. There are many times that one of the other methods will suffice. But for us, interactive prototypes are a way we can actually see designs all together in 1 context.
the UX group inside Salesforce. You might think that in order for Salesforce to create its product we might just be able to have engineers building features that can be sold.
SYSTEM (SLDS) And what we did was put our brains into 1 design system we call SLDS. It is our best recommendations on how to build accessible components that look great and work well in concert with other components. It is what drives the Lightning Experience.
Salesforce. With a sales-centric mindset, we focused on reinventing the desktop environment to better support your sales process. The result is an intuitive, intelligent interface that helps sales reps work more naturally and close more deals faster. www.salesforce.com/lightning A whole new way to build pixel perfect apps. Get free access to our UI library, CSS framework and design guidelines so that you can build application UIs that are seamlessly unified with the Salesforce user experience in record time. www.lightningdesignsystem.com LIGHTNING EXPERIENCE Side note: to showcase the difference in these two things, the Lightning Experience is the actual product that end-users use. It is fast, beautiful, and productivity-centric. The Design System is the style guide and assets that creates the look and feel of the Lightning Experience.
started with 4 core principles. They are indeed “stack ranked” such that if there is ever a question between two design options, we will go with the one that has either more Clarity, more Efficiency, or more Consistency, in that order.
TOKENS PROGRAMMATIC DESIGN TOKENS … we go a step further by giving that color palette also in code form. We have Sass variables (we call them Design Tokens) that are semantically named so you no longer have to hardcode the color values. Recall that Salesforce releases 3 times a year: color and metrics values change. By using variables you can keep your style in sync with us.
token in Less, Stylus, Android, iOS Adobe and Mac color swatches MORE SLDS www.lightningdesignsystem.com The Design System is framework-agnostic: you can use with standalone or with your favorite CSS or JavaScript framework! It works well with Salesforce technologies including the Lightning Components framework.
API SPIKE SPIKE SPIKE SPIKE SPIKE SPIKE Let’s talk about how we do interactive prototyping. We have a core codebase that melds SLDS with modern JavaScript libraries and decorates that with sample data or data from the Salesforce REST API. The prototype isn’t 1 large prototype but several small prototypes we mix and match: we call them Spikes.
HEADER STAGES PAGE BODY Here is an example of how you might take a complex UI like the Opportunity Workspace and divide it into smaller spikes. This means we can test the designs, move spikes around the page, and get a realistic sense of how the UI looks and feels.
Analytics Community Marketing Service IoT Sales Multitenant Cloud One of the new things we’ve been doing is blending sample data with actual Salesforce data. We are using the public REST API.
like this, the feed at the bottom left might be fake data, or the green/blue/ gray stages bar might be fake, but we might sprinkle REST API data in for the record name, account name, and some related list records.
Really test-drive multi-page workflows Can still combine fake data What we find is that when we do research, the users being tested focus more on the new workflow they’re being presented. Previously when we had all sample data on the screen, the users would have to slow down to figure out what sample data was in front of them because it wasn’t familiar.
one of the cool things we do with interactive prototypes is test motion and animation. Those lessons are now baked into the Design System as a style guide.
are actually dealing with a third dimension of time. We must find a way to explain to the user what’s happening to their UI with animation. Also, we must find a way to specify this experience for our production engineers.
animations to our production engineers is via a storyboard. And in the design stage we find ourselves doing these kinds of things. But to actually get a sense of how to describe an animation to an engineer this isn’t a great way.
whole set of Motion guidelines, logical spatial system, and vocabulary. If you go to https:// lightningdesignsystem.com and navigate to Design > Motion, you can see this page.
types of animation, so we can tell engineers if we’re affecting an object entering/leaving, or if it’s already on- screen, or if it’s an object that’s morphing over time like a form that grows/shrinks.
objects on the screen should have a sense of mass and permanence. Just like the 12 principles of animation in the classic Illusion of Life, we want our screen objects to feel physical. They must speed up/slow down gracefully. They must feel solid.
a logical framework to think about light and shadow. Higher Z numbers mean an object should look like it’s flowing over another object; lower Z numbers should make it feel sunken. We put those values into the Design Tokens to help create shadows that look like a single global light source was directly above the user’s monitor.
grid of time. We specified 0.1 seconds as the basic grid unit which translates to 6 frames at 60 frames- per-second and 3 frames at 30-frames-per-second. It’s thus possible to synchronize motion in the browser to video that might have been rendered.
whole library of effects that have specific names. This helps specify the exact animations we want our engineers to do in a consistent design language. The production engineers can then look at the visual effect of the animation and then examine the source code that made the animation.
CHOREOGRAPHY INTERNATIONALIZATION / LOCALIZATION / RTL DEVICES ACCESSIBILITY And so, that’s a tour of how we use interactive prototyping to help us get to better design decisions in a realistic, high-fidelity way.
salesforceux
olgastoryboard
madue
zozodevelopers
mixi_design
shuzo
kubosho
ryokanakai
mct
ncdc
nathanacurtis
root_recruit
thebogheart
aleyda
chriscoyier
lara
bryan
rmw
pauljervisheath
nonsquared
reverentgeek
destraynor
panda_program
jonrohan
paigeccino
![THANK Y U. [email protected] @amster](https://files.speakerdeck.com/presentations/a52036a6431c44a39479d7a9952f355d/slide_80.jpg){kind=link}