Redesigning a user interface is a daunting task. You have to consider your users, the current interface's many functions, and the end goal of your
redesign as well as the original goal of the project you are redesigning. Often times more than just a facelift, such projects require understanding
of interaction design. My first step is usually writing down each necessary element of the original design (page title, each checkbox element,
submit/reset buttons, etc) and then clear my head of the design, and try and logically develop a new one, from the perspective of a user trying
to complete each task possible with the current design. Here is how I proceeded.
From the start, you notice a few things. First, there's a lot of archaic acronyms! This is generally ok if you're audience is specially trained to be able to understand the acronyms and use the software. However, it arguably lessens cognitive load on the user when they don't have to recall acronyms which is why I opted to use natural language instead of acronyms. Second, there's lot's of unused space. You notice the feedback section, whose purpose is to report all user input so the user can verify their actions are being submitted. A better solution was to relegate the entire section to a feed modal button, and instead provide realtime subtle notifications whenever an action is performed (shown below, excuse the lack of padding in the design).
Currently the design employed an orange color across the page (not necessarily a theme, as there is no palette of primary and secondary colors). This was not necessary and did not do much for the stylistic aspect of the page. Instead, going with a monochromatic theme and opting to use color to emphasize elements of the UI was preferred. Such as a pulsing "start" button, where the color and animation both serve to draw attention to the initial action that must be performed on the page to proceed with anything (shown below).
The use of iconography is always appreciated. Generally a rule is that an icon should be able to completely replace the text that describes it, and understood in less time than it would take to read the text. However, icons can also be used as supplements, as seen here. Here, they are used to complete the sentences of the buttons they are embedded within. Also seen is an icon for a person, indicating the counter to the right of it is for the person count. A bit more elegant than "# of Students:".
A lot goes into making an aesthetically appealing website. Drop shadows consistent in angle to emulate a stationary light source, depth to simulate spatial hierarchy, typography with varying weights and sizes to emphasize that hierarchy, iconography to ease understanding, and animations and colors to direct attention and bring liveliness to the page. It's a science that I am continously trying to understand, and a craft I am constantly working at. This is yet another attempt at understanding and working that science and craft, with much more to come.
You can find all the code for this classroom portal on my Github
Many scientific publication hosting sites have incredibly outdated, frustrating, and aesthetically unpleasant user interfaces. This is usually out of no desire/need to update such sites (those that use the tools, know the tools). A notable exception is Google Scholar, which aggregates publications from across the internet into a relatively streamlined tool.
Search, as usual, is the heart of Google’s product, with filters off to the side and the results being the center piece, but is there way to make this interface more inviting, and bring modern features into the interfaces of the other, more antiquated publication hosts?
One thing I have been most intrigued by is natural language processing, and parsing text for further analysis. For a publication database, it seems as if the main method of interaction is text input, where the user seems to know pretty much exactly what they want rather than go on a journey of discovery to find a paper to read. From the publication databases I visited (except for Google Scholar, which of course they nailed their method of search/text input), most were relying on multiple text boxes and filter options and tons of unappealingly complex input types. The single most beneficial element on a publication database would be a search box armed with AI to parse text into filters automatically for the user. Imagine having a universal search box that knows whether your input is a name, a year, or a DOI number! So I designed an entire UI for such an application, where search is front and foremost, that was designed with NASA in mind as the publication host.
Here you can see how prominent the search box is, and how the placeholder text invitingly says "just type" instead of something more traditional like "search database". I believe little things like that (that as you said, management doesn’t notice, but we do) are important. There was no way to get around a header, so I tried going for the least obtrusive one (one that would be lacking a solid colored horizontal bar across the top of the screen). The links float, and the active link follows the color of the logo on the far right, which thankfully gave me an accent color to play with. The logo really balances out the top right of the page well, despite having no interactive elements there it certainly doesn’t feel empty or plain. Most of the interactive elements have drop shadows, to signify depth on the page and the fact that they are actionable elements. I use iconography in a few places (search, citation, and trending/your recommendations) for clarity and avoidance of what is traditionally an extremely text heavy type of website. Publication sites don’t have very many pretty pictures! Text colors on the publication cards vary, black for the most important, light gray for secondary info, and red for standout information (in this case, the number of people who have cited that specific publication). Also, notice that the UI scales very well for the desktop web, but it appears very touch friendly too. Large touch targets!
I have a love/hate relationship with solid color backgrounds. Love because minimalism is great, hate because it seems TOO bare. The alternatives are often tasteless, such as extreme gradients (although can be done well!), or full background textures or images. A happy medium I found was using a line drawn icons that are only slightly darker than the background color (to be an accent rather than a distraction). This however gave it a slight children’s daycare website vibe, so I experimented with a slightly more sophisticated version of it below, which retains the solid color for the background of the page, but adds iconography to the main card elements.
So here, the publication cards have the line drawn icons on them. I think it looks great, and all the cards on the page could be programmed to have different icons (so in this example, 6 cards are shown, create twice that much and with each scroll you dynamically change the cards that are hidden from view and about to appear into view change their icon behind the scenes. This way, the user never sees the same icon twice in one screen. Another cool idea would be parallax scrolling (both horizontally and vertically) between the icons and the cards.
This expands on the UI by introducing a "quick peek" interaction model, either activated by a hover or a click. This lets you dive a bit deeper into the publication (shows the abstract and gives the option to add to your library). Inverting the colors seemed to me to be a good aesthetic choice and one that makes it visually evident which element is being interacted with.
These action buttons are elegant and could present themselves on a hover or click as well.
With UIs getting more and more complex and layered (especially legacy UIs that get new features padded on, often with no design team overseeing the process), it can be difficult to make the experience an enjoyable one. A rethinking of the whole design to incorporate new features and ideas that have been added is not easy to do (and not a scalable approach). For portals that rely more on the "hunt-and-pick" method of interaction, where users know what they are looking for or what they want, just not where it is, a complex UI is a burden. Maybe a search function is a remedy in some cases. Discovery of new features and tools is not really the focus of these UIs, making the already well-known features accessible and available is. I cannot think of a better application for a chatbot user interface than a complicated UI in need of human-centric design.
Chatbots and conversational UIs have been invading our lives recently, whether in the form of a voice assistant on your phone, a chatbot in a messaging app, or the Alexa in your home. It's trendy, but rarely applied the best way it can be. In this case, it is a perfect user interface. Most of the tasks performed in a student information system (getting grades, finance information, transcripts, signing up for classes) can be easily explained by a natural language query. In such a system, there are no menus, submenus, buttons, or any of that mess. The user knows what they would like done, and they instruct their application to do so, naturally.
In the above mockup, you may notice a few things. The only real buttons are suggestions for additional queries, likely AI powered to know what users usually request next or what might be the next logical task or information in the system to retrieve at that moment. Also at the bottom you may notice the "hey lou" voice wake word, should the user want to use speech to interact with the bot (affectionately named Lou, a 1 in 49581 people name, easy to enter the vernacular of a school to refer to the application exclusively). The rest of the mockup is self-explanatory, and it is easy to imagine further applications of this kind of UI and the use cases it enables.
Making a webpage with limited content/UI is always a challenge in the sense that too much whitespace looks unsightly. This limited content may be a massive list you have to scroll through (in this case), but limited by the small amount of data expressed for each list item. How do you make a pleasing UI where all you have to do is scroll through a list and select an item? This is of course easily doable for screen sizes such as a phone perhaps, but when your core audience is people viewing your content through a widescreen Chrome window, this becomes very difficult.
The norm is to have lists be vertically scrolling, of course. This makes a ton of sense when your content is heavily horizontal spanning. That way, the maximum screen real estate can be utilized. In this situation however, I had to work with text-only data points that don't quite take up much space. As you can see, there are only 4 distinct text boxes per element in the list to be scrolled. Having this scroll vertically would be a tremendous waste of horizontal. It's clear that horizontally scrolling would be the way to go, but what is the best way to take advantage of all that new gained vertical space per element?
Iconography and its effect on easing cognitive load for processing data needs no explanation. It was clear that for better comprehension of the data as well as a aesthetically appealing look, icons would have to be employed. In this case, I opted for line-drawn icons instead of filled icons, for aesthetics and the discomfort I feel when seeing a filled icon that is not a button of some sort. Optimal padding is present, to give each data point ample breathing room (and to liberally use all that vertical space). The use of shadows helps establish depth and layers to the page, and of course typography establishes hierarchy (large font size for the title of the page, small but bold for the card title, and regular and smaller for each data point in the cards).
The moral of the story is that side scrolling is a fantastic tool in the utility kit for a web designer, one that is criminally underused perhaps since people are not used to it or that scrollwheel mice are physically designed to scroll vertically (however many people still using those, but hey that might be your core audience). Especially in a situation like this, horizontal scrolling is an efficient use of screen real estate and looks fantastic.
You can find all the code for this side-scroller on my Github