Web-based dashboards are an integral part of our daily lives.
They allow us to simply interact with a product or service. This may include actions like uploading files, managing your cloud-based photos, or publishing a blog post. Whether it’s Dropbox, Google Drive, or WordPress, they form some of the most-used interfaces on the web.
The common design problem across all of these is how to condense extensive functionality into a simple user interface. It’s an ongoing project. Designers are constantly seeking ways to improve upon the overall user experience and ease-of-use. Often these changes are incremental. Other times, there are a considerable number of updates made at one time. This is often referred to as a redesign. It’s these instances that we are going to analyze today.
We’re going to look at some of the mainstream services like Dropbox and Stripe, both of which have undergone redesigns in 2017.
Dropbox
Source: Dropbox
The first dashboard we are going to analyze is Dropbox. Having kept the dashboard the same for many years, Dropbox decided it could achieve greater simplicity in its design. The initial rollout earlier this year boosted key metrics and was rolled out to all users just a month later.
Before
Source: Cloudwards
After
Source: Dropbox
Navigation
The Dropbox navigation had become cluttered as new features were rolled out over time. The average user had over 12 items in the side navigation. Most of these were categorised poorly and often merged personal and work within the same space. This was a major issue in terms of both privacy and security.
Source: Groovypost
One of the core features, Paper, was also positioned as if it were an extra feature. This separation gave the impression that it was a service independent of your existing Dropbox workflow.
The redesign focused on a simplification of this area. The new design consists of a two-tier navigation.
Source: Dropbox
This allows the highest tier to be condensed into three key items: Home, Files, and Paper. Files and Paper now contain 3-4 items each. Compared with the 12 plus items shown in the previous design, this is a considerable simplification. The redesign also now highlights Paper as a core feature. This makes it appear more inclusive as opposed to looking like a separate product. Personal and work accounts have been separated completely. It’s now clearly highlighted in the bottom right.
Source: Dropbox
It includes a short line reminding the user when they are accessing a folder which is ‘Only me’, or shared with others. Switching between these also produces a toast notification. This adds further reinforcement and ensures the user has switched to the correct account.
Content
The content area also saw a full redesign. Previously, this area was very tightly-packed with little white space surrounding the table rows. The primary actions such as Upload, New Shared Folder, New Folder, and Bin, were all represented with just a small icon. These icons could be difficult to understand at first glance, particularly with no accompanying text labels. They also all formed the same level of visual hierarchy. This was despite Upload Files being the most used feature by a considerable margin.
Source: Dropbox
The redesign tackled a number of these issues. First, it added greater spacing around table rows and increased the sizing of the elements contained within it. This included the icons which help indicate important information such as file type and shared status. The primary actions were moved into the sidebar and accompanied by text labels for each action. Upload Files was transformed into the primary action by adding a blue background. Other improvements included an increase of the search area size, and a new full-width layout to make greater use of screen real estate. The user section was also simplified, increasing the avatar image size and removing surplus details such as the user’s name.
Style
The overall style of the Dropbox dashboard redesign is highly refined and makes exceptional use of white space. The simple navigation does away with a vast amount of iconography, replacing it with very few simple options. These implement enough typographical hierarchy to ensure a great user experience, even without icons. The light off-grey serves to add some visual separation between the navigation area and the main content.
The redesign is one of the best in a long while, but it’s not perfect yet. A number of elements from the previous design remain, including the header section notices. The Upgrade upsell is also rather unceremoniously plonked in the top right, and uses styling from the previous design. Over time these details will be ironed out and present one of the finest dashboard designs on the web. It’s taken what is a highly capable and functional service, and made it into something that is simple enough for anybody to use and understand.
Stripe
Source: Dribbble
The other dashboard we’re going to analyze is the redesign of Stripe which was rolled out earlier this year. The redesign signified a switch in design direction from its old design. This was based heavily around gradients, borders, and shadows. It has brought it in line with its stunning new homepage design, which has drawn praise from most of the design industry.
Before
Source: GitHub
After
Source: Dribbble
Navigation
The Stripe navigation in the previous design was beginning to look dated in its design language. The redesigned navigation has brought it up to date with some stunning new, clearer icons. It also includes better spacing between navigation groups. The category names have been removed and the font sizing has been increased. Where previously the navigation was split into two – one in the header and one in the sidebar – it’s now been merged into a single simple design.
The new dashboard navigation blends seamlessly with the rest of the interface. It was previously encompassed by a surrounding background. Instead, the navigation is now differentiated simply through the depth provided by the content elements.
Content
The new content area is larger, simpler, and more visually impressive. Graphs are more detailed, and easier to navigate and understand. The backdrop to the graph elements is a high contrast, on-brand background. It looks excellent in juxtaposition with the surrounding user interface.
Source: Dribbble
The search box is larger and more prominently positioned, and the user area has been simplified down to a single avatar. The redesigned dashboard also allows for simple switching of accounts. This was not as apparent in the previous version.
The content section also includes a second-tier navigation for switching sections within a page. This allows for the simpler primary navigation we see today. It also provides greater separation within each main page. Content can be digested more easily without overwhelming the user with information.
Style
In many regards, Stipe follows similar language to Google’s Material Design. It uses a simple typography structure and depth styling throughout. The contrast is always on-point and its user interface icons are both unique and yet easy to understand in every instance.
While there is great consistency throughout the main dashboard pages, it suffers similarly to Dropbox. This is because multiple associated screens and designs have still not yet been brought up to date with the new design language. This includes popular screens such as sign-up and login. It’s surprising that these were not deemed to be high priority since they are some of the most-visited screens.
Overall it’s an impressive redesign which carries through the website design perfectly. Stripe have developed a user friendly dashboard and implemented a unique design system. It’s a delight to use and will be even more so as other important pages like Login see the same application of design language.
Check out admin dashboard templates on Elements.
The post An Analysis of Mainstream Web Dashboard Redesigns appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2iS9LDG
envato.com coupon
Tidak ada komentar:
Posting Komentar