How to Prototype a Starship Computer Interface with Mockplus

This article was created in partnership with Mockplus. Thank you for supporting the partners who make SitePoint possible.

I’ve been a fan of science fiction for a long time, and sci-fi films have often been a crystal ball into the future of technology. Tricorders can easily be reimagined as cell phones, and wrist communication devices can easily be seen as paralleling the Apple Watch.

On the other hand, many technological wonders that we thought would have come to pass by now have yet to materialize — things like hoverboards and flying cars.

--ADVERTISEMENT--

But there’s one thing I’ve always really hoped I would not have to use: those complicated computer interfaces.

They looked clunky and too overwhelming to be used efficiently. I remember watching some of these movies, thinking to myself: “How would they know what anything is? All of the buttons and lights look the same.” If you go back and watch some of your favorite sci-fi movies, you’ll see what I am talking about. One example, shown below, shows a bunch of colored blocks, with no labels or any other way of determining one from the other. There also don’t seem to be any controls on the screen, cluing you in on what to do with the content.

Star Wars

Another good example is the LCARS pod bay interface below, from Star Trek. There are a number of zones, on and off switches and schedule buttons. How would you know where each zone’s physical location is? It would make more sense to have a touch interface in the shape of the bay, where you could select the zone visually. The biggest problem I see with these interfaces is trying to do everything on one screen.

Star Trek LCARS

You Can Prototype Your Own with Mockplus

If the makers of the interfaces above would have had a tool like Mockplus, they could have foreseen the problems a user would have with this type of interface. Let’s take a look at how you can use Mockplus to create your own starship computer interface.

Let’s say I wanted to create a simple crew interface that showed the crew member’s photo, name, rank, and a short bio. The tools are intuitive, and I was able to create the simple layout for the first person in around 30 seconds. You’ll find align tools to select and align elements, and you have control over things like fonts, sizes, colors, etc. Mockplus also has a lot of templates to start you off with. If you’re using some common interface elements, you can find a lot of them in Mockplus’ template library. If you don’t want to create the design of the interface in Mockplus, you can import your designs and layouts from Sketch.

Import

What really stands out with Mockplus is its automatic data fill feature, and the ability to turn objects into repeating elements. With the outlines of the person’s image, the heading where their name goes, their title, and a short bio, I was able to select all of those elements. Then, I right-clicked on them, and selected Convert to Repeater. Then, I could click for the number of times I wanted the object repeated vertically or horizontally.

What gets even better is that I can ungroup those elements, and select them. Then I click the paint bucket icon at the top, which allows me to populate each field with names, similar photos, and more. This makes dummy content more realistic, but also quick and easy to replicate.

UI Flow

One of the most important aspects of user interface design is the UI flow. That is how you flow from one screen to the next, and how you interact with the elements. In our futuristic design, we’ve created the crew area, but it’s just floating there in space. Mockplus allows you to decide how you get there, and what it leads to. You can create new pages, enabling you to create the different screens you would cycle through in your actual interface.

UI Flow

Step 1

I decided I would create the main page that takes you into the crew page first. The main page will be made of a few buttons in a column, with different side buttons, colored coded in other areas on the page. To do this, I grabbed the rounded rectangle tool and drew out a single rectangle. I set the fill to none, the stroke to 2 and the color to a neon green.

Rectangles

Step 2

I double clicked each button to add text to it. I clicked “Convert to repeater.” I then clicked the down arrow twice to create two copies. Then, I changed the text to other ship related terms. You can change the colors, fonts, borders and more in the right column. The great thing about the repeater function is that when you create the number of elements you want, they are automatically grouped, so you can adjust the spacing.

Additional controls

Step 3

Next, I will add a couple of gauges, typical of a futuristic interface. They will show the ship’s fuel level, as well as the current load on the ship. It’s easy to create the bars and repeat them, the same way we did with the top buttons. I made them a pinkish color, for their importance. A simple text label at the bottom shows which is which.

From a UX standpoint, it makes sense to label gauges. Going back to what we discussed with the interfaces from some of our favorite sci-fi movies, things are rarely labeled. There are just boxes and lights, baffling me as to how anyone would know (without extensive training — or perhaps even with) what anything is or what it does. The fuel and load bars can help you gauge how much, in relation to capacity, is present, due to their relationship to the allotted space.

Coordinates map

Step 4

Next is a coordinates map that shows the current position in the solar system, and the location of the destination. The solar system is shown by circles that represent different orbits, with the yellow dot showing the location of the ship and the red dot representing the destination. There are plenty of shapes and line tools to be able to create different types of elements. Every solid object allows you to control the color of the fill and stroke, or you can make them completely transparent.

Start by creating circles with a yellow stroke and no fill. For the yellow dot, simply draw a circle with a yellow fill and no stroke. Do the same for the red circle.

Step 5

Select the line tool, and from the options in the right box, choose dotted. Drag out a line that connects the red and yellow circle.

Step 6

Select the text tool and, using yellow as the fill color, notate the number of kilometers between the current position and the destination coordinates. This rudimentary diagram can easily represent a solar system and different planetary orbits. This is a much better option than simply displaying the distance from your destination in kilometers. Our interface will tell you so much more than that. You could plot planets, asteroids and asteroid belts, as well as any other obstacle. This would allow you to plot your course and plan ahead.

Distances

Step 7

In the top right corner, the two sets of squares could represent an interface that lets the captain know of any debris or smaller obstacles which may be close, with the center representing their proximity to the ship. Use the rectangle tool to create the two boxes. Use the line tool to create the diagonal lines. A great representation of any danger should be shown in red. A red object’s proximity to the center of the squares tell you how close those dangerous objects are. The Xs in the middle help you to be more precise visually, without cluttering the screen.

It is important from a UX standpoint to have an interface that would show you smaller debris. It would help you maneuver the ship more precisely. Trying to see or plan for smaller debris on the larger map would be tedious and difficult.

Putting It All Together

Now that you have your pages, you can click on elements that lead from one page to another, and link them together.

Flow

Flow 2

Step 8

You simply click on an element, and in the menu on the right side, you choose which page it leads to. In the example above, we click on the crew text and then in the right menu, under targets, we choose from the list of pages. A quicker and easier way is to click the small circle on a selected element and drag it to the page you want it linked to on the left panel.

Step 9

Link up all buttons to their respective pages this way. Once you’ve linked everything up, you can get a birds-eye view of how everything links together with the UI Flow feature. Click the zig-zag icon in the top menu to switch to the UI Flow feature. This is a great way to see if there are any screens in your UI where you can’t get back home from.

Link up

Auto Data Fill

One really useful feature, especially when creating repeating dummy elements, is the Auto Data Fill Feature. I was able to create the crew page quickly and efficiently. Just right-click an element you want to duplicate and convert it to a repeater. Then, ungroup it. From there, you can click the paint bucket, and select one of the avatar options. For names, select text and choose name, and choose both males and females.

Auto Data Fill

In the image below, you can see that the interface has arrows that show you the flow from one screen to the other. When I started this, I realized that I had a way to get back from the individual page to the crew page, but not a way to get from the crew page to the main page. That’s where this feature really comes in handy. It’s a great way to see a break in the user flow when moving throughout your interface.

You also have full control over how UI flow looks. You can change the colors of the lines that show the flow between elements. You can also control things such as the background color, device colors and screen outlines. This is all available from clicking the gear icon in the top left.

Auto Data Fill 2

Conclusion

If the interface designers of the Empire or Starfleet had a tool like Mockplus to help them prototype properly, they would have realized how difficult their interfaces would be to use in real life. UI Flow would have vastly improved usability. With Mockplus, you can use common elements to layout your interfaces, and you can use UI Flow to see how they all connect together. And you’ll never get stuck tediously creating repeating elements with the repeater feature.

Mockplus is a great tool for designers, both on Earth and beyond. The 3.3 release has made great enhancements to its team and enterprise features to empower your collaborative project management and teamwork. Click here for more details and take the free trial for a spin and see for yourself.

Mockplus