Wireshark is a network packet analyzing tool. The tool has a large number of icons and tasks which the user needs to comprehend in order to use the tool effectively. I designed a Guided Tutorial to help the user understand the purpose and function of individual icons and panels present in the tool.
Role
UX Researcher, Designer
Responsibilities
Understanding the functionality of the software, analyzing the current implementation and performing heuristic evaluation of the software, suggesting enhancements in the software and increasing customer engagement.
Current Implementation
The software offers thorough detail about existing packets, and there is a lot of information presented to the user. For a new user, this is very overwhelming as there is a lot to comprehend and analyze. The Wireshark user guide is a detailed document (192 pages) which explains the purpose, working and importance of the software. However, this is a lot of information to read which is a time-consuming process. The document in itself could be organized in a better way in terms of the alignment, font and general look and feel.
The Welcome Screen of Wireshark has the following issues-
a) There is uneven spacing between the three sections on the screen.
b) There is a lot of unused space on the screen.
c) There are 20 icons on the menu bar, out of which only 2 are usable while 18 are greyed out.
d) Apply filter section is irrelevant on the first screen as filters can be applied only after capture begins.
The Capture screen of Wireshark displays the following problems-
a) The default setting of the screen is to have ‘Colorize’ ON which displays all the packets in different colors. This is very confusing for first time users as the significance of colors is not known.
b) There is no icon for managing System Preferences.
c) There are 3 icons for zoom - Zoom In, Zoom Out, Return Text to Normal Size which is not necessary.
d) The 3 panes are not labelled
e) Expert Information and Detailed Information icons at the bottom left of the screen are not representative of the functionality the icons offer.
f) There is no back button on this screen, due to which, user is stuck on this page and the only way to go see the first screen is to close the application and restart it.
g) Symbols like Start of Packet, End of Packet, Request, Response, etc. in the first column of the first pane are not explained.
Current Design Screenshots
Approach
I started my approach to find a solution to the UI problem by conceptualizing designs for the first screen and divided the screen into three distinct sections – Interface, Files and Resources. However, enhancements to the UI were not sufficient to make the software more user friendly. Therefore, I thought of adding a resource called Guided Tutorial to help the user navigate through Wireshark, while explaining the functionality of every icon, symbol and tab on the GUI. The presence of a Guided Tutorial will enhance User engagement and encourage the users to understand the functionality of the software when they first launch the software. The user can also refer to the guided tutorial at any point they have questions about the software.
Proposed Solution
The proposed solution is two-part solution:
1) User Interface Enhancement
• Welcome Screen
a) Instead of using 20 icons on the first screen, I used only 4 major icons – Start Capture, Stop Capture, Restart Capture and Capture Options. I gave the UI a predominant Black Interface, which was something different than the current implementation. I used gradients and shadows to make the buttons look realistic and clickable.
b) Interface Section: The new design displays 6 interfaces at a time, with a scroll bar next to it to facilitate browsing of the interfaces. I replaced the ‘All interfaces shown’ button with three check boxes, one each for Wired, Wireless and External Capture. This implementation saves the user one click while selecting interfaces.
c) File Section: The new design displays 6 interfaces at a time, with a scroll bar next to it to facilitate browsing of the interfaces. In the current implementation, all the files are displayed at once, without a scroll bar. Even in the presence of only one file, a huge chunk of white space is reserved for Files Section, which gives the UI an untidy look.
d) Resource Section: I added a link to Wireshark’s official website and introduced a guided tutorial in this section.
• Capture Screen
a) Colorize function is default to OFF to avoid creating confusion for first time users
b) A new icon has been added to manage System Preferences
c) 3 icons for Zoom have been replaced by one icon which does the same task
d) 3 panes have been names as Packet List, Packet Details & Packet Bytes
e) Icons on the menu bar have been refined to be more representative of their functionality
f) Back Button has been added to facilitate navigation
2) Guided Tutorial
The guided tutorial helps the user take a tour of the software and understand the purpose of every feature offered by the software. After clicking on Guided Tutorial, the tour begins at Interfaces and proceeds serially to Files and then Resources. Every feature is explained with the help of text of a bubble with Back and Next buttons. The description of every feature is taken from the Wireshark User Guide. Apart from the icons, the tour helps the user understand the functionality of filter feature, all three panes, packet related symbols, expert info and detailed report features.
Proposed Design
Guided Tutorial Sample Design
