top of page

Guide

Create a Website with Custom Code

Wix Blog

How to Improve Your Website's UX

Wix Blog

Website Navigation: Best Practices, Tips and Examples

Status Bar


 



What is a status bar?


A status bar is a thin horizontal bar that provides users with information related to the current state of an application or device they’re using. The minimal design of the status bar allows users to always have easy access to status-related info while they use an application like a word processor or a device like a smartphone.



Where is the status bar located?


In application windows, the status bar is affixed to the bottom of the open window. Depending on how many status indicators, icons, or notices there are, it may be organized into various sections based on the type of information provided.


On device screens, the status bar appears at the very top. The various status indicators appear in a single row, but are divided into two sections to make room for the device’s camera or microphone in the center.


Another thing to note about where the status bar is located is that it never gets in the way of any open applications. For instance, when someone decides to create a website for their company, it lives within the browser application. The status bar never gets in the way of the browser nor does it cover up the site’s content because it’s affixed to the top of the screen and outside of the application window.



What is the purpose of the status bar?


The purpose of the status bar is much different from other horizontal bars found at the top or bottom of devices or applications:

  • The menu bar contains dropdown menus like File, Edit, and Help that enable users to access different features within an application.

  • The address bar is specific to browser applications and provides users with information related to the current web address, security, bookmarks, as well as navigational icons to go back, forward, or return home.

  • The toolbar is typically a row (or two) of icons and dropdowns that allow users to control the settings of the application or device they’re working in.


While the elements within a status bar can be clicked on and explored, their main purpose is usually not to give users control over what they’re seeing on the screen. It’s to learn more about what they’re seeing.


Status bars in applications show details related to the content that’s selected in the app or that the user is working on. Because of this, status information will change as the user interacts with the app.

  • Example: You open your computer’s file manager and select three files to move to the trash. The status bar at the bottom reads “3 items selected”.


Status bars on devices show details related to the operational state of the device. The type of information included in the status bar will always be the same. However, as the state changes, the details will also be updated.

  • Example: You use your smartphone to watch a movie on a train. When you start the video, the time is 12:35 p.m. and your battery is at 99%. When you finish, the time is 2:05 p.m. and your battery is at 48%.


 

You may also be interested in:



 


Status bar usage and examples


The status bar has become an essential part of the UX design of most applications, as well as the devices people use on a daily basis. It provides a quick reference point while the user simultaneously uses the device or app.


Desktop browsers


Years ago, desktop browser windows had a status bar that would display information related to the web address, its security, and so on. While that status bar is gone, some browsers still display floating information in the bottom-left corner of the page when a user hovers over or clicks on a hyperlink.


File managers


The status bar at the bottom of a desktop file manager only contains information when files have been selected. It displays details such as:

  • The name of a single selected file

  • The file path for a single selected file

  • Number of files selected

  • Total size of the files


Graphics editors


Similar to file managers, a graphics editor application only displays details related to active files. Specifically, the status bar will reveal details about the current image:

  • File name

  • File size

  • Dimensions

  • Resolution

  • Color profile

  • Percentage zoom


Word processors


The bottom of a word processor like Microsoft Word will display a couple different types of information. It’ll display details related to the document’s setting. For instance:

  • Language

  • Editing mode

  • Reading view

  • Percentage zoom

  • The state of the caps, num, and scroll lock

It’ll also display details about what the user is working on within the document. For example:

  • Total word count

  • Selected word count

  • Character count

  • Page __ of __


Spreadsheet programs


Spreadsheet programs generally include two types of information. The first is information related to as well as controls for the percentage zoom and column formats. The second is mathematical calculations related to the selected cells in the spreadsheet:

  • Number (count) of cells

  • Total sum

  • Average value

  • Max or min value

Some spreadsheet programs will display the text that’s in a given cell if only one is selected.


Email services

Some email services—like Gmail—include a status bar below the inbox. Users can find information related to:

  • Percentage of email storage used

  • Date and time of last activity in the app

  • How many devices currently have the app open


Device screens

The status bar at the top of a device will display different details depending on what the device is and how much space is available. Here are some of the status indicators that may be included:

  • Current date and time

  • Internet connection

  • Wifi strength

  • Battery life

  • Bluetooth enabled/disabled

  • Night mode enabled/disabled

  • Sound on/off


Video games


Many video games provide a status bar at the top of the screen. Users reference this status bar over the course of the game to check on their progress or current state. Some of the more common elements users will find there are:

  • Number of lives

  • Percentage of health remaining

  • Game progress

  • Total points accumulated

  • Time elapsed or remaining


Related Term

User Interface (UI)

Related Term

Wireframe

Ready to create your own website?

The latest trends in business, marketing & web design. Delivered straight to your inbox.

Thanks for submitting!

bottom of page