Design System & UI Components
I believe that visual design and interaction design are the heart of great UI. For users, the UI of the product that they see and interact with *is* the product! Our goal is to make the UI "disappear", so that the user can focus solely on what they are trying to accomplish and not even think about the UI.
I'm a proponent of direct manipulation of objects and interaction that gives immediate feedback and encouragement to the user. And attention to detail in micro-interactions that comprise larger interactions is an absolute necessity to make app interaction a delight for users.
Finally, a key to good UX design is communicating design intent to stakeholders, especially the engineers that are implementing a design. The artifacts needed will vary based on the specific design and the audience -- for example, a seasoned front-end engineer who has worked on the product for a while may need less guidance to understand the intent of a design, while more junior individuals, or stakeholders outside the product team, may need more explicit guidance and documentation, such as interactive prototypes or demo videos.
NOTE: For all mockups below, you can scroll up and down in the mockup and/or click the mockup to expand it to full size.
Design Systems
By creating a design system that standardizes the look-and-feel of UI components across an application (or suite of applications) we can ensure consistency of appearance and interaction behavior wherever those components appear in our designs.
By developing HTML/CSS/Javascript components that correspond to the objects defined in our design system, we can bring design and development closer together and streamline design handoffs for greater shared understanding of design intent and faster implementation. We can also directly support responsiveness at the component level.
Mobile rendering of a responsive design
Mobile First design
Here we see an example of a responsive design rendered in a mobile form factor. By designing the mobile version first, we can focus on the essential elements needed for the feature / user story / use case. It's much easier to "scale up" a mobile design to tablet and desktop form factors than to "scale down" larger designs for mobile.
Scroll in the mockup to see the full design.
Visual editing of a custom workflow
Visual editing of a custom workflow
Here we see a multi-modal interaction design for editing custom workflows. The most important information in the workflow, the named states (steps) and the transitions between them, are shown in an interactive diagram on the left. This gives the user an at-a-glance overview of the general workflow progression.
Details for a selected state are shown in a collapsible panel at the right. Progressive disclosure is supported in the panel via collapsible accordion sections and subsection drilldown (e.g. "Manage Validation >").
Note that users may also perform actions directly on the states in the diagram by clicking the 3-dot (ellipsis) button at the right of each state node, which provides a popup menu of the most common actions, such as adding a transition to another state.
Annotated mockups for a workflow
Micro-interactions: Annotated workflow status mockups
Here's an example of a workflow status bar design for a sales workflow in an e-commerce application, along with sticky notes that help explain the dynamics of the design.
At the top, we see a view-only version of the workflow, with a disclosure icon (>) that allows the user to see details of the workflow status in more detail. This layout could be used on a dashboard or on an overview screen for the Order.
The series of mockups below the view-only panel show an interactive version of the workflow status, in a bar design that also allows the user to set the current status. Sticky note annotations to the right of each state of the bar provide details about how the bar should work responsively (in different display conditions) as the workflow proceeds. The annotations are especially helpful for front-end engineers who implement this UI component.
The bottom mockup shows the popover that appears when the user clicks/taps the button displaying the current status of the workflow (in this case, "Sent to Warehouse"). This popover allows the user to manually change the status of the workflow (if current conditions allow that). The annotation sticky note describes rules for the display of the workflow in the popover, and the origin of the rule descriptions/help that are displayed in the lower right corner of the popover (such as those shown for the "Customer Review" step that the user is hovering over; this content is edited by a user who has used an Admin interface to set up the workflow itself).
Creating a new medical appointment (mobile)
Mobile interaction: Creating a new medical appointment
These mobile mockups show a simple navigation scheme for specifying all the details required to create a new medical appointment by a user who works for a healthcare provider.
Primary actions are in the header at the top of the screen (e.g. "Close appointment" and "Save appointment" on the New Appointment screen, or "Back" and "Search" on the Select Patient screen) and are thus easy to find. This layout is consistent across interactive screens in the app.
Note how the main screen provides an overview of all the information necessary to create the appointment, with each section of information on its own row. The screen displays only the primary value for each section, thus keeping information density low to avoid overwhelming the user, make scanning easier, and also to avoid scrolling.
The navigation scheme is a simple "right and left" slide from each overview section to each details screen and back. UI animation is used to slide the details screen in from right to left (and then slide the details screen back out from left to right when returning to the main screen). This animation helps the user grok the "geography" of the screens easily.
On the Select Patient screen, a list of recently viewed/touched patients appears as the default view. If the user is creating a new appointment for a patient whom they've recently interacted with, the Recent list saves the user from having to browse or search for that patient. The user could select the patient they need in as few as 3 taps.
Note the alphabet carousel on the "All" view of the Select Patient screen, which allows the user to quickly jump to a specific section of the list without having to scroll endlessly. This is another time-saver that is particularly valuable if the list of patients is large (as it is likely to be).
Finally, note that the patients in the lists are displayed as collapsible/expandable accordion rows, providing at-a-glance access to primary information (name, gender, date of birth) in the collapsed version, while hiding details that might be painful to wade through if displayed for every patient. A simple tap on a patient's row displays the next level of details for that patient, such as age, preferred name, maiden name, phone number, and address. If the user needs to see the patient's full details, such as previous procedures, prescriptions, etc., then a "Full Details" disclosure button is provided at the lower right of the record.
UI component: Equal-height panels
In this video, I demo a responsive CSS/HTML component that uses flexbox layout to make panels equal height when they are on the same row in a grid. This component was part of a design system I created for SourceMed.
UI Component: Status Filter
In this video, I demo an annotated interactive prototype for a micro-UI design allowing user control of a status filter. I've found that this level of detail enhances understanding of the dynamics of a design for stakeholders, especially engineers implementing the behaviors.
This video has no sound -- the feature is explained via text annotations, so that stakeholders watching without headphones in a collaborative environment don't disturb others around them.
Inline creation and editing
Inline creation and editing
Here's an example of inline editing, which allows the user to create or edit data directly in the context in which the data is displayed (in this case, in a table of existing data), without having to use a separate form. Inline editing provides an immediacy to data input that makes sense to users and provides an analog to the physical world. It also allows them to stay in the context of their thoughts as much as possible.
Note also the multiple modes of input in the "Value" popup -- the user can type in values with the keyboard or move the ends of the range slider. Users on mobile devices can use the slide without the pain of typing on a virtual keyboard, while users with a physical keyboard get the convenience of direct entry of values. Even if not used interactively, the range slider helps the user visualize the size of the specified range as well as its position relative to the min and max.
Navigation via bookmarks (tablet)
Navigation via user-defined bookmarks (tablet)
For applications containing many thousands or millions of objects, users often want to "continue where they left off" or quickly navigate to specific objects that they may work with frequently, such as an active client or a current sales quote. Most users are familiar with bookmarking URLs in web browsers, thus making this type of navigation feature easy for users to understand and use in applications.
This mockup shows a design for a bookmarking feature, in this case as viewed on a tablet. Throughout the application, the user can "bookmark" almost any object by tapping its "Bookmark me" icon. This causes the object to appear in the list displayed in the panel that drops down when the Bookmark icon in the application's header is tapped.
As shown here, the list can be grouped by object type and sorted by how recently each object was viewed/touched or by object name. The user can navigate instantly to any object in the list by simply tapping its row.
Wireframe of Risk Assessment Builder
WYSIWYG Assessment Builder
This UX allows a user to build an interactive cybersecurity risk assessment for healthcare organizations, which is presented to the user as a series of "pages", each containing a number of questions. The creator can then publish the assessment, to be filled by risk assessment professionals (or other staff helping to assess risk) at the organization.
Note the contextual layout of this assessment builder feature:
Actions are placed physically near the objects to which they apply (for example, Edit / Copy / Delete to the right of each question).
Buttons for adding or inserting a new item (a Question, Text/Image, or Action) are placed where the inserted or added object will appear.
The Add Page and Merge Pages actions are placed physically between the pages, so it's obvious where in the sequence a new page will be added, or which two pages will be merged (the one above and the one below the Merge Pages button).
As the user adds pages to the assessment, an interactive, navigable list of the pages is updated in an accordion list on the left of the screen. The user can expand/collapse each page to see/hide the items on that page. For long assessments with many pages (or many items per page), this gives the user an overview of the assessment and the order of the objects contained in it, without having to endless scroll up and down or remember the pages and items that are not currently in view.
Note also the View/Test tab at the top of the assessment (to the right of the Edit tab), which allows the user to view and interact with the assessment exactly as a real user filling the assessment would (when the assessment is published).
Information security risk assessments for products in use by an organization
Assessing information security risk for products used by an organization
Healthcare organizations must continually assess their compliance with government regulations designed to protect patient information, such as HIPAA. This wireframed design allows a user to easily see which products are in use by their organization, along with each product's Importance and Risk Rating, which are stored in Clearwater's IRM | Vendor SaaS product.
Again, only primary information for each product (Vendor, Product name, Importance rating, and Risk rating) is shown by default, with details available by expanding the product's accordion row. For organizations with a large number of products in use, this allows the user to quickly spot products that need attention due to a high Risk rating (if coupled with a sufficiently high Importance rating).
When a product is selected in the list at left, the user can not only see details about the product inline in the table but also, using the panels on the right:
Begin a new assessment of the product, and
See all currently Active assessments for the product, who each assessment is assigned to, and each assessment's completion status.
This screen has high information density but uses information hiding and progressive disclosure to effectively communicate what the user needs while avoiding overwhelming the user with too much detail at once.
Tracking Battery Packs in a client's Electric Vehicles
Equipment Records Dashboard
Here's an example of a simple Equipment Records dashboard for a manufacturer of battery packs for electric vehicles (EVs).
Cards on the left provide overview stats for the number of EVs of different types (e.g. truck, van) at a client company that use the battery packs being tracked. Large hero numbers provide an at-a-glance of how many Vehicle Identification Numbers (VINs) and Battery Packs are being tracked for the client.
At right, the user can find details for the specific battery packs in use by a specific EV by searching for the EV's VIN. They can also add new VINs (and associated battery pack details) or upload a file of VINs (and associated battery pack details).
Equipment Record Details
Equipment Record Details
Building on the above example, here's an Equipment Records details page for a manufacturer of battery packs for electric vehicles (EVs).
There's a large amount of data here, much of it actionable. Clean, consistent layout with lots of whitespace makes consuming the data comfortable and enjoyable. To help manage the large amount of data here, we provide a nav panel on the left containing an overview of the different categories of data, with direct links to each section, along with icons showing the status of the data in each section: complete (check mark) or incomplete (warning triangle).
Each details section on the right is collapsible, so that the user can hide data that isn't of interest at the moment. Actions are included in the context of the specific section to which it applies (such as the "Order Parts..." button in the Maintenance / Parts section).
Some data and actions use "hero"-style typography for at-a-glance visibility (such as the Status dropdown in the top section and the "Claims filed" number in the Warranty section).
Mobile rendering of a responsive design
Responsive Design: E-commerce Dashboard - Mobile
These mockups show a responsive design for an e-commerce dashboard rendered in mobile (smartphone), tablet, and desktop views. Note that, in addition to the overall page layout being responsive (the cards rearrange themselves on the page to fit the available space), the cards themselves are internally responsive, rearranging their contents to fit the available space.
Click each mockup to see the full design.
Tablet rendering of a responsive design
Responsive Design: E-commerce Dashboard - Tablet
These mockups show a responsive design for an e-commerce dashboard rendered in mobile (smartphone), tablet, and desktop views. Note that, in addition to the overall page layout being responsive (the cards rearrange themselves on the page to fit the available space), the cards themselves are internally responsive, rearranging their contents to fit the available space.
Click each mockup to see the full design.
Desktop rendering of a responsive design
Responsive Design: E-commerce Dashboard - Desktop
These mockups show a responsive design for an e-commerce dashboard rendered in mobile (smartphone), tablet, and desktop views. Note that, in addition to the overall page layout being responsive (the cards rearrange themselves on the page to fit the available space), the cards themselves are internally responsive, rearranging their contents to fit the available space.
Click each mockup to see the full design.
Dashboard with responsive, interactive panels
Dashboard with Interactive Panels
This dashboard wireframe uses responsive panels to display data in a variety of ways: as hero values, in a bar chart, in a line chart, and in tabular grids. The panels are interactive -- for example, note the interactive elements in the upper-right corner of the # of Critical Risks panel (top row, 3rd from left) that appear on mouseover/hover (or via a tap on the panel when using a touch device such as a tablet), allowing the user to learn more about the panel (via the "i" icon button) and to use a hamburger menu to edit the settings for the panel.
Dashboard with Annotated Micro-UI
Dashboard with Annotated Micro-UI
Here's a wireframe for a Risk Governance dashboard, with annotated wireframes for a micro-UI within the dashboard -- the dropdown for specifying tags to filter the data displayed on the dashboard. This level of detail is necessary to get the dynamic display and interactive behavior of the UI exactly right.
Click the wireframe image to zoom in on the full design -- a large monitor is helpful here!
UX for creating/editing a complex data structure
Creating/editing a complex data structure
This mockup shows an interface for creating and editing a very complex data structure -- a service (or product) model containing a hierarchical segment configuration, a Bill of Materials (BOM), model rules, and versions of the model.
While the data being edited is extensive and complex, effective use of information hiding, progressive disclosure, direct manipulation, and inline editing in the UX design helps to manage this complexity for the user.
In the Configuration of the model on the left of the page, the user can:
Expand and collapse the segment hierarchy to display details of segments of current interest and hide details of other segments.
Display all details for a segment or option in the details pane on the right side of the page by simply clicking/tapping the segment or option name.
Use direct manipulation via drag-and-drop handles on each segment to rearrange the model's hierarchy.
Directly edit primary data (segment and option names) in the hierarchy display via inline editing.
"Switch gears" to focus on other aspects of the model, such as the BOM, by using the tabs at the top of the model panel.
Graphical preview of workflow templates
Workflow Template Selection with Graphical Preview
This mockup shows an initial creation panel for creating a new workflow using predefined templates. When a template is selected, a graphical preview of the template is displayed, allowing the user to more easily understand the steps that are predefined in the workflow.
Providing predefined templates and being able to preview templates in this way gives the user a head start on creating new objects, in this case a workflow. Most creative tasks are made easier with templates, as the user can explore the structure of the object(s) they're creating without having to face the dreaded "blank canvas". Allowing the user to save their own templates, or use previous creations as templates, make templates even more useful for users.
Contextual ("3-dot" / "ellipsis") popup menus
Contextual menus in a Search Results list
I believe that locating actions within the display context of the object to which the actions apply is a tenet of good layout. Here's an example of a Search Results list showing a multi-column layout, with contextual ("3-dot" or "ellipsis") popup menus for each item in the list.
PDF-format sales quote document design
Sales quote document design
UX isn't just interactive screens in an application. It's also the user's total experience with objects outside the application, such as designs for reports and other documents, e-mail messages, etc.
Here's a design for a sales quote document intended for delivery as a PDF file attached to an e-mail.