Rapid7 Blog

User Experience  

Snakes Masquerading as Vines

We spend a lot of time identifying trustworthiness in our day-to-day lives. We constantly evaluate trustworthiness in both the people that we meet and in the products and services that we decide to interact with. Imagine that you're like Tarzan in the jungle; you're trying…

We spend a lot of time identifying trustworthiness in our day-to-day lives. We constantly evaluate trustworthiness in both the people that we meet and in the products and services that we decide to interact with. Imagine that you're like Tarzan in the jungle; you're trying to navigate your way through products and services using the vines that hang in your path. Each vine either helps or hinders your path forward. Some are stronger than others and help you swing a far distance quickly and effectively (angel patterns). Others are actually snakes masquerading as vines. You reach out to grab hold and instead get bitten, releasing your grip and falling to the ground (Dark Patterns). As a user swinging through the jungle of products and services, it's easy to mistake a snake for a vine and end up lost on the ground. As designers, we need to do everything we can to make the vines of angel patterns obvious and remove the dark pattern snakes from the user's path. Like any new relationship, using new software starts with a little bit of anxiety. In software products, this anxiety is felt the first time a user engages with your product. A product with clear and honest messaging with transparent communications can reduce such user anxiety. We call it an angel pattern. There are many such angel patterns to achieve trustworthy experience. Read the original article published in User Experience Magazine to learn how we apply these patterns.

12 Days of HaXmas: Designing Information Security Applications Your Way

Merry HaXmas to you! Each year we mark the 12 Days of HaXmas with 12 days of blog posts on hacking-related topics and roundups from the year. This year, we're highlighting some of the “gifts” we want to give back to the community. And while…

Merry HaXmas to you! Each year we mark the 12 Days of HaXmas with 12 days of blog posts on hacking-related topics and roundups from the year. This year, we're highlighting some of the “gifts” we want to give back to the community. And while these gifts may not come wrapped with a bow, we hope you enjoy them. Are you a busy Information Security professional that prefers bloated web applications, fancy interactions, unnecessary visuals, and overloaded screens that are difficult to make sense? No…I didn't think so! Being a designer, I cringe when I see that sort of stuff, and it's something we avoid at all cost at Rapid7. You don't even have to be a designer to dislike it. My mantra mirrors that of Derek Featherstone, who said “Create the minimum viable interaction by providing the most valuable piece of information for decision-making as early as possible.” And focusing on good design is the gift I bring to you this HaXmas! To bring you this gift, I am always learning about new ways to solve the problems that you and your teams face on a day-to-day basis. That learning comes from many sources, including our customers, books, webinars, blog posts, and events. One notable event this year was the aptly named An Event Apart, held in Boston. An event what? An Event Apart is a tech conference for designers and developers to learn,and to be inspired by, the latest design trends and coding techniques that improve the way we deliver applications. While other conferences tend to focus only on design, this conference does much more by bringing a variety of topics under one umbrella, including coding, web and mobile app design. To that end, every speaker at An Event Apart is pretty famous in our world—it was great to see them in real life! Three days and twelve presentations later, my head was swimming with ideas. But the most important themes I brought away were to: Design the priority Speed it up Be more compassionate Let's look at each of these concepts one-by-one and see how they apply to the way we designed InsightIDR, Rapid7's Incident and Detection Response tool, which allows security teams to detect intruders earlier in the attack chain. Design the priority At the conference, Ethan Marcotte, the father of Responsive Design, said “Design the priority, not the layout”. Ethan mentioned this because designers tend to consider the layout of an application screen first. Unfortunately, this approach has a tendency to throw out the signal-to-noise ratio. Jeffrey Zeldman agreed with Ethan when he said, “Design your system to serve your content, not the other way around.” This concept has really come to the forefront with the Mobile First approach from Luke Wroblewski, who argues that "Mobile forces you to focus". Well, I argue that you do not need to be mobile to focus! This concept is just as important on a 27” screen as it is on a 5” screen. As we design InsightIDR, we design the priority, not the layout, by helping our customers focus on the right content. As you can see on the InsightIDR design to the left, the KPIs are placed in order of importance, with date and trending information, allowing our customers to prioritize their next actions as they protect their organizations. This results in a better user experience, and time saved for other tasks. Speed it up According to Jeffrey Zeldman, the applications we build need to be fast. Very. Fast. Commonsense, I hear you say, and I agree completely. But that's no easy thing when you are collecting, analyzing, and sorting the amount of information that InsightIDR captures. Can we sit back and start to think that our customers would understand if it takes a few seconds for a page to load? Not at all! Yesenia Perez-Cruz, design director at Vox Media, suggests that organizations need to better plan for a more strategic way to decrease the file size of web application pages, while concurrently increasing load times. We have taken Jeffrey's and Yesenia's message to heart, as we strive to ensure the pages and content within InsightIDR load as quickly as possible, so you can get your job done faster. Be more compassionate Being compassionate by standing in the shoes of the people we design for might seem like a no-brainer. After all, the ‘U' stands for ‘User' in my job title ‘UX Designer.' Yet, some designers do not take the time to actually speak with the people they are designing for. But at Rapid7, I speak with customers about their security needs through our customer voice program on a regular basis. The customers that have signed up for the program have a say in the features we design, and they get to see those designs early so they can, in effect, co-design with us by letting us know how to modify the designs to make them more effective. Only then can I and the rest of the UX team at Rapid7 truly design for you. In this respect, as Patty Toland, a regular An Event Apart speaker, says “Design consistency isn't pixels; it is purpose.” Wrapping up At Rapid7, I am always learning about design, about our customers' needs, and about the future of information security. So, if you are in Boston and hear someone on the T softly say “Create the minimum viable interaction by providing the most valuable piece of information for decision-making as early as possible,” that will probably be me as I go to work.  On a more serious note, if you have not done so already, make sure you sign up for our Voice Program to see what's in the works, and have a say in what we do and how we do it. Here are a few links to that program if you are interested: Rapid7 Voice: https://www.rapid7.com/about/rapid7-voice/ Rapid7 Voice email: Rapid7Voice [at] rapid7 [dot] com I look forward to speaking with you in the near future, as we work together to design the next version of InsightIDR! Thanks for reading, and have a wonderful HaXmas! Kevin Lin, UX Designer II Rapid7 Image credits: First image: An Event Apart (©eventifier.com, @heyoka) Second image: insightIDR

Building Personalized and Exceptional Customer Experiences

Building personalized and exceptional customer experiences At Rapid7, we strive to give you, our customers, a personalized and exceptional experience every time you interact with our organization, our products, and our services. This is what we refer to as the "Customer Experience". In…

Building personalized and exceptional customer experiences At Rapid7, we strive to give you, our customers, a personalized and exceptional experience every time you interact with our organization, our products, and our services. This is what we refer to as the "Customer Experience". In order to clarify what this term means, Don Peppers from the Peppers & Rogers Group defines the Customer Experience as “the totality of a customer's individual interactions with a brand, over time”. We are all customers In our daily lives, we are all customers. We would all like our experiences with every organization to be personalized, seamless, and exceptional. Yet, whenever we interact with an organization, I am sure that most of us have felt that we are interacting with many organizations in one, and that the right hand has never even met the left hand, let alone that they do not speak to each other. That's a difficult obstacle for any organization to overcome, as each organization has many different individual employees interacting with many different individual customers. The downside for all of us is that we, as customers, have to deal with less than exceptional experiences. Meanwhile, at Rapid7… …while we strive to provide exceptional experiences, we know that we are not perfect. So, what are we doing about it? A lot actually! The first step is to define a strategy, so we have a vision and we know where to focus. Our strategy consisted of mapping out our customer's end-to-end journey, initially at a high-level in the form of a Customer Experience (CX) Framework. The model defined the start of the journey, namely where potential customers become aware of, and start initial engagement with Rapid7, our products and our services. Following this, the majority become actual customer's where they start to use our products and services, and finally they evolve as customers. The latter, might be using multiple products together, or using our products and managed security services at the same time to ensure they are as secure as possible. Now that we had a high-level framework in place, the next step was to get a little more granular, and figure out what the touch points were within each of the AWARE, ENGAGE, USE, and EVOLVE phases of the journey. We mapped these out as: Discovering experiences With a CX framework and associated touch points in place, the next step is to find out what our customers experiences are. If customers' interactions with a specific touch point is great, we want to make sure that does not change; if interactions could be improved, we want to make it much better. The UX team found that the best way to discover our customers' experiences was to collaborate with Evan Jacobs, Rapid7's Senior Manager of Customer Marketing & Advocacy. Evan runs the Customer Voice program, which ensures that customers have a say in our product roadmaps. While this is a wonderful opportunity for our customers to let us know about the features and functionality that they want to see in our products, it is also a wonderful opportunity for us to learn more about our customers' experiences. UX Focus Groups Some of the recent ways that Evan and the UX team collaborated to learn more about our customers' experiences was by holding a series of focus groups. At UNITED, Rapid7's annual customer conference, the User Experience team ran two focus groups. One of the focus groups looked at customers' experiences around Nexpose Now, and how we can make that an even better experience. The other focus group concentrated on the end-to-end customer experience, whereby customers marked out which touch points they interacted with using the map above, and told us about those experiences. The UX team, as well as representatives from Product Management and Product Strategy, learned a lot about how customers' journeys, what worked well, and what could be better. For example, customer's mentioned that overall they were really happy with Rapid7's Customer Success and Customer Support teams are one of big differentiators in our favor. We also learned that reporting from our products could be better. Some reports, such as the Top Remediation report, were really helpful in making our customers successful as it allowed them to prioritize on fixing the vulnerabilities that made the biggest impact on their organization's security posture. Other reports, however, need more customization before they could truly be deemed useful. Local User Groups In addition to the focus groups at UNITED, we also holding local user groups. Within the past few days, we met with customers in Washington DC. Prior to that we met up with customers in Cambridge, Massachusetts and in New York City. Several other user groups are being planned across the US and Europe. Looking at the combined results of what we learn allows us to see patterns. This, in turn, allows us to deep dive on specific areas of the customer journey. We find that the user groups are not only a place for us to learn about customers' experiences they are also beneficial for our customers, as have an opportunity to have a peer-to-peer discussion with other security professionals. Our customers also get to hear about the latest features and functionality in the product roadmap, so they can influence the development of those features prior to release. Want 'in'? The best way to participate and to have your say, which will help us to build our products your way and to ensure you have the best experience possible with Rapid7, is to become part of the Customer Voice program. It just takes a few seconds to sign up, and the benefits will far out weight those few seconds! We look forward to speaking with you soon about your feature and functionality requests and about your experiences with Rapid7! Thank you for reading! Ger Joyce Sr. User Experience Researcher Rapid7

Synergistically Yours, IoT Security-Usability

Let me tell you a story….…a few months ago, I was going home from an airport in an Uber with my wife. We recently bought a house and were looking for some renovation work and discussing few ideas on the way. The…

Let me tell you a story….…a few months ago, I was going home from an airport in an Uber with my wife. We recently bought a house and were looking for some renovation work and discussing few ideas on the way. The very next day, I received a call from an unknown number—the caller said “Hello Mr. Dutta, I am [caller's name] calling from [company name]. I would love to discuss the home renovation project you are planning to undertake in your home”. At this point his words started blurring as my mind was racing in different direction on how did this guy know all these details? Was it the city that informed them? Was it UBER? The timing was crazy! That got me thinking…Security and usabilityEveryone loves UBER. It's quite easy to hail an UBER at a tap. But can UBER be a privacy risk? Can we say that for a better experience and usability, my privacy can be compromised?I started digging deep into this relation. I realized that in websites when security measures like CAPTCHA are added, it makes the website more secure, but the conversation rates for those websites drop significantly as usability is reduced.Looking at health care systems, in certain types of insulin pumps, a physician has all the vital information, including the patient's blood glucose level, the moment a patient steps into the clinic. To enable this, the insulin pump has an always-on Bluetooth sensor. This convenience comes at the cost of high security risk, where it's possible to tamper with the device remotelywith serious consequences.Finding a balanceSuch examples make us believe that security and usability are two antagonistic goals within system design. Simson Garfinkel, in his doctoral thesis at MIT, argued that there are many instances within which security and usability can be synergistically improved. This is possible by revising the way that specific functionality is implemented in many of today's operating systems and applications. Garfinkel further explains that in every case considered, it is shown that the perceived antagonism of security and usability can be scaled back or eliminated by revising the underlying designs on which modern systems are conceived. The errors in system design, computer user interfaces, and interaction design can lead to common errors in secure operation.By identifying and correcting these errors, users can naturally and automatically experience more secure operation. For instance, an emerging area is Internet of Things (IoT) devices—this area can benefit hugely from an established set of patterns/ rules/ framework which is optimized for security operations.Widespread attacksIn September 2016, we saw a record-breaking Distributed Denial of Service (DDoS) attacks against the France-based hosting provider OVH. That attack reached over one Terabit per second (1 Tbps), and was carried out via a botnet of infected 150000 IoT devices. Less than a month later, a massive and sustained Internet attack caused outages and network congestion for a large number of web sites. This attack was launched with the help of hacked IoT devices, such as CCTV video cameras and digital video recorders, and impacted websites from high-profile organizations, including Twitter, Amazon, Tumblr, Reddit, Spotify and Netflix.Mirai”, which was used to hijack the connected IoT devices, exploited the default usernames and passwords set by the factory before the devices are shipped to customers. Mirai is capable of launching HTTP floods, as well as various network DDoS attacks, including DNS floods, UDP floods, SYN and ACK floods, GRE IP and GRE ETH floods, STOMP (Simple Text Oriented Message Protocol) flood attacks.Securing usable IoT and making secure IoT usableWhile such incidents are scary, IoT devices are awesome!!! They make our lives easier. The potential for IoT is limitless. However, while security is a potential risk, we cannot afford to seize the opportunity to exploit IoT capabilities to its fullest.  What we need is discipline—some kind of governance or rule book on how to securely use these products.Garfinkel refers to them as simple patterns.Developers and the organizations that employ them must analyze their risks, the cost of proposed security measures, and the anticipated benefits. Be it security or usability, neither should be added to a system as an afterthought. Instead, security and usability must be designed into systems from the beginning. By providing pre-packaged solutions to common design problems, patterns can address this deficit.A great example of a Usability Pattern is “Copy and Paste” or “Drag and Drop” that have dramatically changed the usability of computer systems. Similarly, Security Patterns, such as using the Secure Socket Layer (SSL) to “wrap” cleartext protocols and Email-Based Identification and Authentication for resetting passwords, have allowed developers untrained in security to increase the security of their systems. Patterns that align security and usability of IOT devices can create that much-needed rule book for the IoT developers.I want to leave you all with the thoughts that IoT systems must be viewed as socio-technical systems that depend on the social context in which they are embedded to function correctly. The security mechanisms will only be able to provide the intended protection when people actually understand and are able to use them correctly.You can further read about independent IoT research complied by Tod Beardsley here, and read about danger of default passwords in IoT by Deral Heiland here.Thank you for reading!Saurabh Dutta, Director of UX, Rapid7

How to Fail Successfully

The Revolutionary Pied Piper Platform I watch a few shows quite religiously and HBO's Silicon Valley is one of them on my summer list. In a nutshell, the show is about a group of engineers starting their own company—Pied Piper—with a revolutionary data…

The Revolutionary Pied Piper Platform I watch a few shows quite religiously and HBO's Silicon Valley is one of them on my summer list. In a nutshell, the show is about a group of engineers starting their own company—Pied Piper—with a revolutionary data compression algorithm, and the plot revolves around all the good, the bad, and the ugly a startup can encounter and then some more. (Spoilers ahead, but seriously watch the show if you're interested; it's pretty good) Towards the end of this latest season, they finally launched their Platform app after a round of Beta testing with great, positive feedback. It was one of the most glorious moments 3 seasons in; Pied Piper was on everyone's lips and they reached 500,000 downloads in no time. However, they soon realized they're in deep water since their daily active user is only a scary 3.8% (which means no one is really using it). They are failing miserably and they have no idea why. “But it says 0 KB used!” What exactly went wrong here? The app itself works great. In fact, it's more than great; it's revolutionary. The platform stores all the files in the Cloud and allows the users to access them on any of their connected devices automatically without further actions; there are no downloads, no space hogging, and no headaches. The technology is obviously not the problem here; the problem is they failed to convey that value to their users. In other words, their users don't get it. Through a focus group they put together the team learned that one participant couldn't get over the fact that it says “0 KB used” on his phone despite he could see all his photos, and another complained about the missing download button on the platform interface when that action is not at all required. What about the successful Beta testing? It turned out the beta accounts were sent to mostly engineers which did not represent the major target audience. Put A Big Spot Light on the Value for Your Users While writing this post I was surprised to find out, rather than just a goofy TV plot, this is actually quite common among the tech world. It raised a very valuable point that, besides all the amazing designs and engineering work, perhaps getting users to recognize the benefits and shorten the time to value is the most important piece of the puzzle. At Rapid7 not only do we start our projects with the story-first approach by focusing on solving specific customer problems in a measurable way, we highlight the values it brings and convey clearly to our customers how they can benefit from it. We understand it is equally important to recognize the benefits aside from getting them, and we make sure the acknowledgement is tied into the overall user experience. First Impression Is Important, but It Should Not End There There are a few ways to achieve it, and having a good first time user experience (FTUX) is always a big win. Not only does it provide your audience a good first impression, it is a great way to guide them through the experience; it can easily become a sustainable system to continuously offer good support when done right. To save Pied Piper and the app, Richard the CEO decided to set up live seminars to teach people how to use the app. He also consulted an agency and spent every last cent they had left on the ultimate solution—Pipey. Yes, I was probably laughing way harder than I should have at this point of the show and finally stopped trying to come up with other possible solutions in my head. Of course this is just a TV show, but for what it's worth this perfectly portrays how without proper planning, the solution for improving user experience would most likely be an unpleasant add-on. From telling the right stories, solving the right problem for the right audience, to introducing that value to your users smoothly involve tremendous efforts across many teams. However, the outcome is tremendously rewarding, and your users will truly appreciate the hard work.

Simplifying BIG Data Within Information Security Applications

Rapid7 wants to help organizations leverage all their data to gain powerful insights into their data security, find and fix exposures that lead to compromise. The User Experience (UX) team at Rapid7 designed a set of tools that help users handle the volume and complexity…

Rapid7 wants to help organizations leverage all their data to gain powerful insights into their data security, find and fix exposures that lead to compromise. The User Experience (UX) team at Rapid7 designed a set of tools that help users handle the volume and complexity of their data to make it simple to analyze and remediate on time. But this wasn't a simple task; it took us about a year and a long process of discovery, analysis, strategy, research, design, and production to deliver Nexpose Now's designs. We are talking about designing for BIG data. So, how did we manage to keep the user experience simple and effective? Digestibility Nexpose Now's Liveboards (aka Dashboards) were designed with the goal of making big data easy to digest. Each default Liveboard contains data cards that provide analytics which help users answer questions they didn't even know they had. We show just what users need, no more and no less. But they can expand into their cards to reveal more information, explore, apply custom filter queries, etc. Clarity The visual design and information architecture helps users find what they need to focus on. In Nexpose Now Liveboards, which are very visual, color helps communicate risks and problem areas with clarity. There is meaning and relationship among elements that share one color. This helps the user navigate and understand the data that is shown in every data card within their Liveboards and every graph/chart in the UI. Reliability Users rely on the relationship between elements, consistency in flows, paradigms and features, but also rely on the veracity of the information. Nexpose Liveboards and all the available data cards reflect the current state of exposure, the latest and greatest information about the user's vulnerabilities, assets, risks, asset groups, sites, teams, credentials, etc. In other words, Liveboards are built for users to feel confident to take immediate action. Users can create multiple views and even share them with other team members knowing that the data is clear and up to date. Problem Solving At Rapid7, we work with User Personas that were built using the Proto-Persona method. Understanding our user's problems and needs allow us to offer better, accurate, and more focused solutions. One of the Personas we focus on when designing for Nexpose Now is the Security lead/analyst. We analyze the needs of the person in this role and aim to help him/her improve their security, assess and report their security posture, have visibility into their organization's environment, measure progress, and the success of their security team. For more information on this topic, read “Information Security Application Design: Understanding Your Users”) from Ranjan Bhattarai, Ger Joyce, and Saurabh Dutta. In summary, Nexpose Now's features allow these types of users to take a look into what is wrong and find an easy way to solve it. The way we have implemented Remediation Projects into Nexpose Now is a good example of good and effective problem solving. Nexpose Now is powered by Rapid7's Insight Platform in the cloud. This means new features and capabilities will be continuously released.We are unceasingly working to improve, innovate and provide amazing experiences for our users. It shouldn't come as a surprise—after all, two of Rapid7's core values involve listening to our customers and innovation, continuous evolution. If you use any of Rapid7's products and want to be part of this continuous evolution and innovation, please make sure to join our VoiceUp program. Thanks for reading! Alessandra Savitski UX Designer II, Rapid7

Log Search Simplified

Hi, I'm Laura, UX Designer at Logentries and today I'm going to discuss how just about anyone can use Logentries to search and analyze their log data no matter what their job title or technical skill level. What is Logentries? At Logentries, the team works…

Hi, I'm Laura, UX Designer at Logentries and today I'm going to discuss how just about anyone can use Logentries to search and analyze their log data no matter what their job title or technical skill level. What is Logentries? At Logentries, the team works tirelessly to provide an easy to use log management service that allows users to stream their logs from just about anything. Logentries can accept data from almost any device that generates log data, including servers, applications, firewalls and routers. Really, any data, from any device and in any kind of format. These log events are automatically collected and sent to one secure location where users can quickly search and visualize their data to find out all they need to know. Typically, Logentries is used by DevOps and Developers while they are busy debugging, monitoring and troubleshooting. More recently, as Logentries has become part of Rapid7 information security and analytics solutions, the power of log search has grown to include a new variety of users within information security teams and IT. These professionals use Logentries search to help solve security problems, investigate incidents and help maintain compliance. So IT guys get to have all the fun? Not quite. We have a growing number of users from non-technical backgrounds who are hot on their heels. Businesses and marketing teams have recognized the potential of using Logentries to monitor behaviors, identify patterns and gather all types of interesting information to help focus their business goals or marketing campaigns. The basics of performing a search So you're not a DevOps master or some kind of IT guru? No problem. I'm going to take you through the basics of performing a search in Logentries using our very own search language LEQL (Logentries Query Language). Using this simple SQL-like language you can extract data hiding deep in your logs. Now that you know the basic query format, we will take a look at putting it into practice. For example, let's take myself, a UX Designer who wants to design solutions for an improved user experience within Logentries. But where do I start? Where do I focus my energies? First I want to discover the most popular or core features in Logentries. Easy. I can do this by using an application library such as node.js, .Net or Java libraries which allow you to log straight from the front end of your application. You can find this in the "Add a log" page and it is a quick and easy set up process. You can find a more detailed set up process and tips in the blog post "A different way to log your website usage". Your developer will help you embed the necessary code into your site and create listeners on elements you would like to track like buttons, links, pages and features. Once set up it can track metrics such as usage trends, activity, behaviors and engagement times across your application. Tracking most clicked features Now that I have the information that is important to me logging to my Logentries account, I can write some LEQL to query this data. First, navigate to the Logentries Log view. This is where logs feed into, where we can select logs and where we can search. The query search bar has two modes. "Advanced" is the mode an experienced user would use to write full LEQL queries. "Simple" mode is for users who are newbies or just need a helping hand in building their query. We are going to use simple mode to get you started. We are interested in learning how often a user visits a feature. We can find this out by tracking how often the button or link to this feature is clicked. First comes the "where" field followed by the "groupby" and "calculate" fields. Next is an icon to allow you to save your query and a time picker to allow you to select a particular time range to search. The mode can be toggled between simple and advanced via the switch mode link. Step 1 We want to search for click events so we search the keyword "clicked." Keyword search will work on all log entries regardless of their format and are case sensitive by default. This will give you a result of all the log entries containing click events. You can see the keyword highlighted in yellow. Step 2 That's great, but we want to do a more granular search. We need to break this up into exactly what features were clicked. Let's group by "features." Once this key is added to your query the calculate function automatically selects calculate(count). This returns a count of the matched search. Your results are returned as a table with all of your search criteria listed and a visualization of your data. Now you can see all the features that have been clicked and how often they were clicked giving an indication into what features users spend most of their time using. This can help me prioritize where I should focus my efforts to work towards making these features better for our users. Endless possibilities This is just one example of how you can use Logentries search to gain insight into your application usage. You could potentially find out lots of other interesting data like what screen resolution your users use most or what the most popular browsers are. You could find out how often or at what point a user drops off or cancels from a workflow such as a sign up process or a create wizard. Or even how long a user hovers on a button or how long they spend on a particular page. The possibilities are endless. To learn more about search check out our docs or start a 30 day free trial. Thanks for reading! Laura EllisUX Designer, Rapid7

UX Research: Steps & Methodologies to Inform Product Redesign

The user experience (UX) design and research teams are preparing to revamp Rapid7's customer learning and online help. As such, I thought I would take the opportunity to provide our community insight into the role UX research plays in bringing new designs – of both…

The user experience (UX) design and research teams are preparing to revamp Rapid7's customer learning and online help. As such, I thought I would take the opportunity to provide our community insight into the role UX research plays in bringing new designs – of both new and existing features and experiences – to fruition.Before I begin, I'll tell you a little bit about our “research” team. The Rapid7 UX research team, which sits within the greater UX team, consists of myself and my colleague Ger Joyce. Together, we bring many years of research, design and management experience, across continents and spanning industry domains. Back to what we do, when the UX design team is tasked with creating a new design, or revising an existing design, the research team likes to be involved from requirements gathering through to measurement of experience success. First, we do our best to understand the problem(s) the designers are trying to solve. Next, considering resources such as time, schedule and availability of participants, we select the method(s) that we feel will best answer our questions, the ultimate goal being to provide our UX designers with all of the information they need to create first-in-class user-centered experiences for our customers.Today, I'll use the example of our upcoming customer learning and online help redesign initiative. As a researcher, the first thing that I want to understand is the goal(s) of the upcoming redesign, and more importantly, the goal(s) of the research itself: what does my team want to gain from the research, what do we know and what questions do we have? We could undertake a variety of methods to answer these question and to provide valuable insight for the designers as they begin to think about requirements for new designs. My recommendation is to begin by conducting internal stakeholder interviews. This would involve speaking with employees who work with customer learning and online help to understand what, in their opinion, is working for our customers, and what's not working; are there gaps in the existing solution, and if yes, what are those gaps? The Rapid7 client services and support teams can provide insight into the customer learning and online help experience from their perspective, again, trying to understand pain points and where and how they believe we can make changes to make better content for our customers to use and consume. If time allows, another great source for understanding best practices and what does and does not work in this space is a competitive review. In this case, we would look at the customer learning and online help content of other companies– for comparative learning– to understand what makes this sort of content successful and what we should avoid. Surveys are another great method for collecting feedback from users, to understand if and how they're using the current content and what is and is not working for them. Finally, we would want to validate our discovery research with usage data and customer interviews.Once we have an understanding of the problem space and our customers' requirements, and often before, the Rapid7 UX designers start their magic. From this point forward, we like to iteratively design and validate concepts and designs as often as we can. Validation can be in person or over the phone, and can include Rapid7 stakeholders or employees who represent users of this content. And we always try to involve our customers. Typically, if the latter, we conduct approximately five interviews per iteration, which is enough to let us know if our designs (direction) are meeting the needs of our customers, whether or not proposed content and interactions are clear and intuitive and whether or not we've missed anything important. Once designs are final (or close to final), we test them with our customers. In this case, we compose a list of tasks that we ask customers to complete using the design, which is often in the form of an interactive prototype. This activity gives us great insight into whether or not content, design elements and interactions are intuitive and whether or not customers are able to complete important tasks, without assistance. If we've conducted frequent and iterative reviews through the design process we are unlikely to be “surprised” by anything significant at this stage, however, that's not to say that surprises don't happen!The steps outlined above could be used to inform the design for this specific redesign project, or others like it. The methods discussed are only a few of the many methods that we use at Rapid7 to form a better understanding about our customers' needs and experiences, from the time that they become aware of Rapid7 through the evolution of our mutual company-client relationship and the experience that that relationship fosters. We constantly strive to learn more so that can continually improve the experience.With all of this said, do you have any feedback related to Rapid7's customer learning and online help that you'd like to share? Or perhaps, you have experience using an exception customer learning and online help design? If yes, we'd love to learn more about that experience. We may be in touch soon, to ask for your feedback on this topic. In the interim, we welcome feedback at: ux_research [at] rapid7.com.Thank you for reading!Mindy MaxwellSr UX Researcher, Rapid7

Designing Authentication

At Rapid7 security is everything, and that doesn't exclude the UX team. Yes, we want to give you beautiful interactions, seamless workflows and screens that make you go ‘Wow!' But security is always there gently guiding our design decisions, which can sometimes cause conflict…

At Rapid7 security is everything, and that doesn't exclude the UX team. Yes, we want to give you beautiful interactions, seamless workflows and screens that make you go ‘Wow!' But security is always there gently guiding our design decisions, which can sometimes cause conflict between security best practices and the best user experience. Following on from an excellent post from Roy Hodgman, one of the most common examples of the impact of security on user experience is authentication: login forms, password creation and all the secure, if sometimes tedious, steps we as users know we have to take to keep our data secure. So much to remember There are many figures out there, but the average user in the US is believed to have over twenty online accounts (some reports claim this figure is over a hundred). Even if we stick with the relatively conservative number of twenty, that's twenty email/username and password combinations to remember. Being realistic we know that people reuse passwords, we all know we shouldn't, but it happens, so this figure is most likely a little lower than the number of accounts users actually hold. Then we have to contend with password policies (see figure 1). Eight or more characters is a standard rule for most passwords due to complexity; there are 6.63 quadrillion possible 8 character passwords, which is a lot to try. Unfortunately, as we increase the complexity of the password we also increase the risk of forgetting or mistyping it. Password1 is easy to remember whereas TizM9$3f%, although the same number of digits, is much harder to remember. Taking all of this into account, as a UX designer, I know that people will forget their password(s), or which email address they've used_. “Is it my work email? My home email? I changed my password last week, what did I change it to?”_ Designing for the wrong credentials** At Rapid7 we follow current best practices. When you mistype your password or email address you get an error. This error is normally in the form of: Now, as a UX designer who wants to give you the simplest, best experience, what I'd like to be able to say is: Or even better: Unfortunately, these messages also say “Hi Attacker, the email address you're trying doesn't have an account so don't try it,” or worse, “Hi Attacker, this email address does have an account here, why don't you try and use it to get in?” Of course we always include the backup action of a “Forgot your password?” link, which takes you through a longer authentication process and allows you to reset the password you've forgotten. Is this going to be forever? Hopefully not. The world is moving quickly, and as designers we need to pay attention. It is our hope that we can continue to streamline login processes across the web, using new technologies and ideas, so that maybe one day the concept of forgotten or mistyped passwords is something we complain to our grandchildren about, because they will never understand the pain. Technologies that could pave the way for a password-free world include: Biometrics Using biometrics, in an ideal world, means users will never have to remember a password again. Currently, a lot of smartphones contain fingerprint scanners to speed up the process of unlocking your phone. However, we still need the password/pin backup as technology hasn't quite reached 100% accuracy. Windows Hello uses facial recognition to log you into your account and authorize payments, again, however, this isn't quite ready for everyday use as you need specific camera technology to take advantage of this feature. Cell Phones Google was reported to be trialing cell phone authentication in place of passwords in December, something Yahoo has also reportedly investigated. This password-free system requires the user to download an application, and connect their mobile phone to their account. The next time the user tries to login to their account they will receive a notification to their phone to check it's a valid login, and the user can then click “Yes” or “No.” There are, however, issues with this being the only means to login. Cell phone batteries have a somewhat unreliable duration – what happens if your phone is dead? Can you login, or do you have to charge your phone before you can read your email? Also, what happens if someone steals your phone? While we like to think of our phones as being private and secure, the recent news reports surrounding the FBI and Apple have shown that no system is 100% safe and that if someone really wants to get into your phone they might just find a way to do so. At Rapid7 …we'll continue to ensure that there is a balance between usability and security. For now you'll have to remember those pesky passwords, but know that we are continuously monitoring the latest authentication techniques, and considering their adaption within our products. That way, you'll have fast access to your security information when you need it, but your information security will always be paramount. If you have any feedback for us on our current authentication process let us know in the comments below or email ux_research@rapid7.com. Thank you for reading! Ceara McCurdy UX Designer II, Rapid7 Further Reading: Cell Phone Authentication: http://techcrunch.com/2015/12/22/google-begins-testing-password-free-logins/ http://www.engadget.com/2016/01/15/googles-creepy-plan-to-kill-the-password/ Biometrics: http://www.techradar.com/how-to/software/how-to-use-windows-hello-1301455

Using Color within Data Visualization

Admit It, You Love Color! Any of the Rapid7 products you use involves interacting to some extent with color. Living in a achromatic world would be dull, compared to a world drenched in colors. Why? Because, color helps us in a number of ways. It…

Admit It, You Love Color! Any of the Rapid7 products you use involves interacting to some extent with color. Living in a achromatic world would be dull, compared to a world drenched in colors. Why? Because, color helps us in a number of ways. It can: Help us to distinguish one object from another Cause actions and reactions Influence our thinking Play an important role in conveying quantitative information. Imagine an air traffic control center whereby the colors used to convey data are inaccurate, poorly chosen color schemes. These will only serve to distort the message that the data values are meant to convey, instead of making them clearer. Miscommunication would be inevitable. This leads us to an interesting question—what is a good color scheme? Staying with the aerospace theme for a moment, information designers within that industry face the difficult challenge of creating clear data visualizations from complex data sets across their applications. But this is not a problem that needs to be solved only for aerospace information designers. Information Security application designers face similar challenges. How Designers Consider Color Because of the similarities in the design of interfaces that use color across industries, there (not surprisingly) is a standard process. Let's look at that for a moment: Phase 1: Data Planning Step 1: Compile a data inventory Step 2: Plan for management of users' attention Phase 2: Design of Graphics Step 3: Design perceptual layers Step 4: Decide where chromatic color will be used and why Step 5: Choose colors Step 6: Solve problems During this process, designers go through a color-determination process—let's look at the process in more detail: Step 1: Compile a data inventory. This step involves determining what information should be displayed on each screen, the goal of each screen, who will use the screen, and its purpose. Step 2: Plan for management of user's attention: This step is about prioritizing the data and its importance relative to the user, depending upon desired activity for each screen or task flow. This is an important step, as it is the step in which a designer creates Urgency Hierarchies. Urgency Hierarchies are created in order to reduce “clutter” in designs in which a considerable amount of data needs to be presented at one time. For people who are not familiar with Urgency Hierarchies, the word “clutter” just sounds like picking unnecessary vectors and deleting them from a document. In the design world, when clutter happens the user will struggle to read or locate material needed for decision-making. To reduce the cognitive load of  high density pages of data, designers can use color to emphasize or de-emphasized important information. Step 3: Designing Perceptual Layers, or creating graphics that support user tasks. When choosing colors for graphics, designers need to consider things like contrast polarity, in other words, will the colors live on a radar-like (bright symbols on dark backgrounds) or map-like (dark symbols on light) display? Both options have been proven to be successful, yet both have pros and cons. Large blocks of texts are more legible on a white background, but other things such as eye-strain, glare, context of use (in dark or bright environments) should also be taken into consideration. The designer needs to decide what needs to be visually prominent and then determine if the goal will be better attained using a radar tactic or a map. Visibility and importance can be manipulated by adjusting luminance contrast, size, line weight and chromatic color, and the goal of the graphic needs to be considered simultaneously. In the instances below, aerospace information designers group data with color: Color is Powerful As we can see, color can be utilized as a powerful tool for visually displaying information. But when overused, it will reduce visual associations. Use of color, therefore, should be used only to highlight critical information, so that those data points are unique, and therefore, the most visually salient elements on the screen. This is something we are always exploring at Rapid7. For example, as part of our Customer Voice Program, we recently asked customers to view data graphs with different color treatments (Figure 4) to obtain feedback on the design and use of color. When asked which graph would be most useful in the context of their Information Security work, two customers responded: “For anything critical, this type of graph (graph 3) would appeal to me, to help get down to the critical as soon as possible” “For the boots on the ground folks, that we're trying to fight fires and solve the problems, graph number 3 would be the preference” In summary, while color is aesthetically pleasing, we must consider the function of color in design, the goals of the consumers of that data, and the context in which the design will be consumed, and design accordingly. We would love to hear your thoughts on how color can best be utilized within Information Security Design. To help us to design our applications from your perspective, visit the Rapid7 Voice Program website, or email Rapid7voice@rapid7.com. Thank you for reading! Zarah Delrosario Visual Designer, Rapid7

Security-in-Your-Pocket (SiYP)

The World is Not Flat, It's Mobile At Rapid7, we are always thinking about how we can make your life easier. Now that there are more mobile devices than people in the world1, our thoughts are turning toward mobile, specifically mobile versions of our Information…

The World is Not Flat, It's Mobile At Rapid7, we are always thinking about how we can make your life easier. Now that there are more mobile devices than people in the world1, our thoughts are turning toward mobile, specifically mobile versions of our Information Security applications. While we have no immediate plans, it's certainly an area we are interested in. But that depends on you, our customer. Are mobile versions of our Information Security applications something you would like to see Rapid7 consider for the future? I am sure that by now you will have used a number of Enterprise Mobile Applications, as they have been with us for quite some time, to the point that we believe they may have become ubiquitous. These types of apps help you to quickly view the insights you need while you are on the go, generally using Dashboards. Insights are also readily available, allowing for quicker decisions making, where you no longer have to wait until you get into the office the next morning, or worse, wait for a month to receive a report. We believe that one industry that could better support mobile people is Information Security. Rapid7 applications display actionable insights that look great on laptop and desktop monitors. Attempting to display the same actionable insights on a 5” screen may, of course, be a challenge. Let's consider a few scenarios where having, and not having, so-called Security-in-Your-Pocket (SiYP)2 might make a difference. **Current Scenario **After a hectic day of protecting your organization's security posture, you are ready to get home. Before you run for your train, you set up a few critical scans, and ensure they are all running before you leave the office. On the train, your attention remains on those scans. In fact, right now, you might as well be the only person on that train, you are oblivious to the world. You'll need the results in the morning for a report to the C-Level team, so you cannot relax. When you get home, the first thing you do is log in to check the scan status.    Only then, do you realize that one of the scans failed over an hour ago. Annoyed, you find out what the issue is with the failed scan, resolve the issue, and re-start it. Hopefully, it will be complete by the time you get into the office in the morning. **Possible Future Scenario **You are commuting home after a hectic day of protecting your organization's security posture. Before you left the office, you set up a few critical scans and checked to be sure they were all running. On the train, you take out your smartphone to check-in on those scans. You need the results for a report to the C-Level team in the morning, so you want to ensure all goes well.   It takes a couple of seconds to log into Nexpose mobile on your smartphone:   Your eye runs over your customized dashboards to see if anything grabs your attention:   Seeing nothing out of the ordinary, you navigate to the scan status screen:   Finding that a scan has failed, you drill down for further insights, then quickly find, and resolve the issue. You are confident that the scan will now run successfully, and you've only lost a few minutes of scan time. That means you'll have the results in the morning, and a report to the C-Level team on time. Speaking of time, it's time you went back to that great novel for the rest of your commute.   Immediate Insights The second scenario, and many others like it, show the benefits of having Security-in-Your-Pocket (SiYP). Yet, there are also downsides to 24/7/365 access. We all know that because we can look at work content when we are not at work, we probably will. However, in the war against information security breaches, having immediate insights close by—even while relaxing—might not be such a bad thing. Mobility—The future of Rapid7 products? Have Your Say So, again, while we have no immediate plans to build mobile versions of our products, whether or not we build one depends on your needs. What are your thoughts on Security-in-Your-Pocket? Is it something you would use frequently, occasionally or not at all? If you would use mobile versions of Rapid7 products, what are the types of products and features you would most like to see? Have your say by leaving us a comment or by emailing us at ux_research [at] rapid7.com. We look forward to hearing from you! Ger Joyce Senior UX Researcher, Rapid7 http://www.independent.co.uk/life-style/gadgets-and-tech/news/there-are-official ly-more-mobile-devices-than-people-in-the-world-9780518.html Eloff, J. H., Eloff, M. M., Bella, M. A. B., Isherwood, D., Dlamini, M. T., & Ngassam, E. K. (2014). Information Security Innovation: Personalisation of Security Services. Information Security in Diverse Computing Environments, 303.

Atomic Design @ Rapid7

Device-Level Design Should Not Be A Thing Large monitors, small monitors, laptops, tablets, smartphones, smartwatches, toasters, refrigerators…where will it end? Nowadays, application designers need to consider a plethora of devices as they design. While we are not considering designing Nexpose and InsightIDR for your…

Device-Level Design Should Not Be A Thing Large monitors, small monitors, laptops, tablets, smartphones, smartwatches, toasters, refrigerators…where will it end? Nowadays, application designers need to consider a plethora of devices as they design. While we are not considering designing Nexpose and InsightIDR for your toaster, maybe one day we will! Although, Brad Frost tells the world of design that device-level design is an outdated concept. That's news to our ears! Let's look at this more closely. Frost's argument is that many organizations are adopting a number of different methods to create fluid interfaces. As the number of these fluid interfaces grow, a need for device-level style guides becomes apparent. Unfortunately, the time-consuming nature around the creation and maintenance of style guides also becomes apparent. This is due to the abstract nature of style guides, which suffer from a number of issues: Designers do not always see how style guides are used in the final interface; All too often, style guides are created after a product launches; Style guides can lack cohesion, where designers and developers may not understand how element relate to each other. Splitting the Atom No, we are not trying to split atoms at Rapid7, but we are looking seriously at Frost's concept of Atomic Design. To get away from the constraints of style guides, Frost asserts that we need to think of interface design elastically. In the same way that an atom contains protons and neutrons within its central nucleus, the Information Security applications our User Experience team designs can also be broken down and simplified. In that respect, Atomic Design consists of 5 distinct steps in creating an application, from a granular atom level up to a page level: 1. Atoms Atoms make up the smallest unit. They might be things like labels, color palettes, fonts, animations, input fields, and icons. These are abstract elements that may not have meaning until put together with other atoms which become Molecules. 2. Molecules Modules are a combination of things like label, icons, and input fields that might make up a navigation menu. It's a stand alone component of the interface. 3. Organisms Organisms are a more complex combination of molecules that form a larger more solid component of design. An example might be a combination of Navigation Menu, Logo, Search form, etc that may form the Header. 4. Templates Templates are purposefully layed out groups of organisms which shows the framework of what will become the page. This stage focuses on content structure which in responsive design is extremely important. 5. Pages Pages are simply the template framework with content, data, and images filled in. This is what the end user sees and this is where a designer can validate or invalidate design decisions such as determining if a header size works because text might be too long and wraps. © 2013 | Brad Frost | From Atoms to Pages It's Not Rocket Science But it is certainly a mind shift. Our User Experience Design team starts to to think at an atomic, no longer at a page level. Any changes that occur at an atomic level will automatically propagate through the subsequent levels (Molecules, Organisms, Templates, and Pages). This also creates shareable components within a central library, saving time and effort across our User Experience Design and User Interface Development teams. To both teams, this way of thinking is invaluable in that everyone can see how designs are created and everything comes together in one place. As a Rapid7 customer, what's in it for me, I hear you ask……well, from a Rapid7 customer perspective, as we start to integrate Atomic Design into our design process, you will start to benefit from a more consistent experience….faster. It also means that our designs will no longer be designed for desktop and laptop monitors at a page level. Instead, Rapid7 applications will be designed at an atomic, device-agnostic, level. Or as Dan Mall over at danielmall.com said, instead of creating web applications, we think more about designing for people by creating “beautiful and easy access to content, agnostic of device, screen size or context”. Thanks for reading! Shannon Cooper Senior UX Designer, Rapid7

What Is Responsive Design, Really?

Responsive Design has been a buzzword for quite some time now. According to Google, this blog post just became one of the 158,000,000 articles you can find when you search the phrase; so what's there left to talk about? What Is Responsive Design?…

Responsive Design has been a buzzword for quite some time now. According to Google, this blog post just became one of the 158,000,000 articles you can find when you search the phrase; so what's there left to talk about? What Is Responsive Design? When you search the phrase Responsive Design, you'll notice the search engine kindly reminds you that the term should be Responsive Web Design (RWD). Sure, the notion of device-based design didn't start blooming until browsers began to support different viewpoints. Especially with the exponential Mobile growth over the last decade, it seems only logical to present your design for different screen sizes in order to provide a better user experience across media. But what if I told you responsive design is much more than that, and we've been doing it for hundreds of years? (Image credit: Wikipedia) Think Content Newspaper editors put the most exciting pieces above the fold to entice the sales because how newspapers are folded and displayed; magazine editors promote their issues by producing stunning imageries on spreads and foldouts. They are not limited by their canvas and they don't dwell on the parts that will be hidden, instead, they figure out ways to put the most important contents front and center for their readers. To design and convey your message loud and clear beyond media constrains, that to me is the essential of responsive-goodness. (Image credit: Google Image) Web Has NO Borders It is human nature to always push the limits of the canvas to express their creativities to the maximum, but interestingly enough, we tend to draw ourselves a box when there are less limits (to feel more in control, perhaps?). Take web design for example, width and height are not native to web, yet we discuss more around physical screen sizes, device diversity, and pixel density more than anything else. Don't get me wrong, these are all valid factors to take into considerations for us to provide seamless experience for our audience across the board, but we also need to remind ourselves to put the spot light back on the contents. Mobile First = Content Focus Since we moved from desktops to laptops and now to mobile devices, we had a habit of designing for the bigger screens first then strip out the less important pieces and stuff whatever we can fit into the smaller ones. However, this approach causes many issues, the main one being users don't get the full experience when they lose certain contents, and it didn't take long for the Mobile First approach come into play. The Mobile First strategy was often explained to design the full experience for the most limited surface then gradually add to it when space is more flexible. This totally makes more sense, right? Well, not really. By either adding or subtracting contents, you're giving your audience an inconsistent experience by deciding for them what are and are not important. Moreover, if you think certain things can be removed on certain devices without affecting the overall experience, wouldn't you say it should be fine to remove them altogether? Don't let the term mislead you. Mobile First is about designing for focus, and we need to define priority, not layout. (Image credit: Wells Fargo) Don't Be Afraid to Re-Write Your Content Content is the key, and responsive design is all about how you prioritize it. it's absolutely valuable and crucial to invest some time into content inventory and audit; examine between what you want to say, what you're actually showing, and what your audience really want to see. If your contents don't make much sense anymore, don't be afraid to re-write them, either. Rapid7 products collect, process, and produce huge amount of data, and the UX team takes the Responsive Design principle to the heart and we constantly analyze and evaluate what we present to our customers to ensure the quality of user experience. Be Truly Interactive! Last but not least, I would like to share with you a quote from two interactive architects: “A truly interactive system is a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.”—Michael Fox & Miles Kemp I encourage you to watch this video of Interactive Wall when you have a few minutes. If architects can break the physical constrains and bring the human-space interaction to a whole 'nother level, imagine the exciting future we are heading! Cheers, Marilyn Chao Level-One Human Behavior Observer

UX Engineering

In most organizations today, building widgets is a separate process from designing widgets. Designers sit over here. Developers sit over there. Designers come up with ‘ideas' and then throw them over the wall to the Developers sitting on the other side. The Developers build what…

In most organizations today, building widgets is a separate process from designing widgets. Designers sit over here. Developers sit over there. Designers come up with ‘ideas' and then throw them over the wall to the Developers sitting on the other side. The Developers build what they think the Designers wanted and then deliver that back for Design approval. Nine times out of ten, Design is surprised to see something that only loosely resembles their original idea. Why is that? Well, the goals of the Design team are different from the goals of the Development team. Designers are focused on shaping user experience and how something looks and feels while the Developers are focused on how something works. They aren't mutually exclusive, but they can easily become that way when the two groups are separated. Of course, this example is grossly over simplified, but if you're a designer or a developer I guarantee that you nodded your head at some point while reading that description. This conundrum is something we've all seen before. What about UX Engineering? What if the Developer sat right next to the Designer? What if they were both focused on how the widget looked and how the widget worked? What if the Developer was building the ideas the Designer was coming up with almost in real time!? Designers could see right away if the widget's double checkbox solution wasn't understood by the end user. Designers could pivot much earlier in the process and come up with improvements that the Developers could layer on top of the existing code. After several iterations, once both the Designer and the Developer were satisfied with the experience the widget offered, they could show it around for feedback. Heck, the widget is nearly complete at this point. They could even offer it directly to their customers for real-world experiences and real-world feedback. It's the act of building the experiences that validates the designs that birthed them. Once a design is ‘living' in it's intended environment, be that a browser, mobile app or desktop app, the decision of whether or not the design solved the problem at hand becomes evident. It's difficult, if not impossible, to judge that when the design is static. That's why we need to push to have designs built as far up in the development chain as possible. Integrating design and development and creating a UX Engineering group goes a long way towards solving these problems. This is where we're headed at Rapid7. The UX organization has begun the push by bringing development expertise into our organization and the pay off's are clear. We're building prototypes and proof-of-concepts that are helping us thoroughly think through all sorts of topics; responsive grid layouts, responsive sizing breakpoints and adaptive tables just to name a few. It's through these ‘living' examples that we're able to see the repercussions of our decisions without effecting the flow of business. No time was lost attempting to build out the solution within our application. By validating our designs offline first, we bring even greater value to the company by increasing throughput and efficiency further down the line. Design improves; Development improves; Business improves. It's a win-win for everyone. Let us know how you feel about bringing Design and Development together in the comments below. We'd love to hear from you!

Applying Visual Design Principles to Improve Signal to Noise in Security UI

As we design the product experience at Rapid7, a key challenge for our team is the presentation of critical security information in clear, immediate ways despite the sheer amount of network and user data displayed in the user interface. We refer to this as a…

As we design the product experience at Rapid7, a key challenge for our team is the presentation of critical security information in clear, immediate ways despite the sheer amount of network and user data displayed in the user interface. We refer to this as a signal-to-noise challenge: important data can be easily lost against the background of unimportant information. Since invisibility is a valuable part of a hacker's toolkit, we can use the power of visual design to improve security simply by reducing the amount of noise and increasing the signal. In other words, by making important information easier to find, view, and understand. Some ways that key security information can be obscured: Information Density: the amount of displayed items exceeds a user's working memory so they are unable to effectively distinguish important data from unimportant data. Lack of Visual Priority: critical information is visually identical to less valuable info, so a user must work harder to locate the info they need. Hard to Quantify Values: the displayed information does not map to a tangible equivalent in the real world, or is mismatched in scale: Risk score of 20 vs. 20 million CVSS Score Attacker behaviors as numerical quantities When crafting the product interfaces, we apply visual design principles throughout to establish information priority, reduce data density, and define a consistent and beautiful visual language to make security values quantifiable and more easily understood. Boosting the Signal Establishing Information Priority When a user creates a site in Nexpose, they are given the ability to define dozens of individual settings. However, only two types of settings are required for a user to complete the task. Without appropriate visual design, a user might spend unnecessary time navigating extensively through numerous additional choices. In this example, we designed the selection UI to differentiate between required settings and optional settings, using the following visual principles: Hierarchy: The required settings are located first in visual order (when read from left to right) by placing those choices in the upper left of the UI. This area is commonly viewed first, so a user is able to see the required choices up front, and consider them before moving on to other elements on the page. Contrast: Notice that optional settings are designated with a blue color that is monochromatic in relation to the surrounding elements. This reduced contrast suggests to the user that these items are lower in priority, because they do not call attention as strongly as other dominant elements on the page. In comparison, required settings are colored orange, increasing contrast and visibility. Once a required setting has been satisfied, its contrast and disruptive visibility is reduced by re-coloring the setting label with the lower contrast blue. Quantifying Abstract Information Security information is often numerical, so a user must work cognitively to discern tangible relationships between abstract quantities. Our goal is to use these numbers to derive additional visual cues that help the user understand the underlying context and how the values might be understood relationally. In this example, we are experimenting with ways to visualize successful vs. unsuccessful user authentications. Displayed as plain-text numbers, multiple values would be hard to compare to one another, especially when matched to a third value: location. We applied the following visual principles as we explored various solutions: Scale/Proportion: The size of the circles varies in relation to the number of authentications represented, enabling the user to immediately know where the most logins are taking place. In addition, circles can be nested within one another; the difference in nested sizes allows a user to compare the proportion of successful (dark) to unsuccessful (blue) attempts: if the blue circle is larger than the dark circle, the number of unsuccessful attempts exceeds the number of successful authentications, which would indicate suspicious behavior. Balance: Placement of the authentication circles on specific map locations unbalances the layout and draws attention to those points. In addition, the circles create radial balance around each important location, ensuring information correspondence between locations and their authentication values. Reducing Data Density Tabular data is a common design pattern in security UI. Information in table form often consists of multiple numerical quantities or text content that is visually indistinguishable from adjacent values. In the above example, a printed report showing a summary of vulnerabilities was originally displayed in a table format with minimal visual styling via color changes. A redesign of the report table provides the user with additional visual elements to help interpret the vulnerability information, using the following visual principles: Harmony/Rhythm: Vulnerability values are matched to levels of color intensity, and these colors are carried throughout the redesigned table to provide visual harmony and connect objects that share equivalent levels of importance. Emphasis: A background box has been added to the single, largest number within each column, so a user can see at a glance what the upper limits are for each type of vulnerability. This single number helps users quickly see whether the entire column is within an acceptable range, no matter how many individual values the column contains. Meaningful Data We believe visual principles have the power to improve speed and precision when presenting security data. Our goal on the UX Team is not to simply give you all the available information, but to organize and deliver it in ways that elevate the important relationships and underlying value of that data to a meaningful level where you can act to secure your environment more completely. Leave us a note in the comments and let us know how you think visual design can improve your security workflow. Thanks, Neil Estacio Sr. UX Designer / Visual Lead

Featured Research

National Exposure Index 2017

The National Exposure Index is an exploration of data derived from Project Sonar, Rapid7's security research project that gains insights into global exposure to common vulnerabilities through internet-wide surveys.

Learn More

Toolkit

Make Your SIEM Project a Success with Rapid7

In this toolkit, get access to Gartner's report “Overcoming Common Causes for SIEM Solution Deployment Failures,” which details why organizations are struggling to unify their data and find answers from it. Also get the Rapid7 companion guide with helpful recommendations on approaching your SIEM needs.

Download Now

Podcast

Security Nation

Security Nation is a podcast dedicated to covering all things infosec – from what's making headlines to practical tips for organizations looking to improve their own security programs. Host Kyle Flaherty has been knee–deep in the security sector for nearly two decades. At Rapid7 he leads a solutions-focused team with the mission of helping security professionals do their jobs.

Listen Now