User Experience vs User Interface Design

Once upon a time, I claimed that I could do UI design of applications. This was back in the Newton and Palm OS days where the apps didn’t do a whole lot and the developer guides had pretty clear guidelines that everyone followed. For Palm OS, it even had the number of pixels from the edges for buttons which made it quite easy to know exactly where to place objects.

Moving forward 20 years, it is clear to me that I can follow guidelines, but I need help designing an interface. This is where I’ve learned a ton working with professionals that do design. So far I’m being vague about what I mean by design, because I think that there is a clear misunderstanding of what is mobile design (or application design in general).

There are 2 main areas that I see referenced in mobile design. They are User Interface (UI) and User Experience (UX). While they sound very similar and some people treat them the same, they are very, very different. I’ve had the opportunity to work with a very talented individual that makes both look easy and has taught me the differences.

In general terms (at least to me), user experience is how the user navigates through an app, uses the features, and generally interacts with it. User interface is about drawing the pretty pictures, identifying the typefaces for styling, and picking the colors. In working with a designer on our team, I saw how he meticulously mapped out how everything would work in the application by putting together flowcharts of what every button would do, how you got back somewhere, what was the recovery for every error, how it interacted with hardware, what to do while the user was waiting for a network operation to finish, etc. The actual user interface was secondary to the user experience; for the most part we used standard controls, a standard color palette, etc. This type of design really impressed me as our designer identified so many things that are easy to ignore when simply writing an app. (How many apps just display “Error” with a number with no way to recover from it?)

On the flip side, I worked on a project where the designers were user interface designers trying to do both UX and UI design. Their UX design made the app hard to use, didn’t consider different screen sizes, didn’t consider navigation, didn’t consider how to display data that wasn’t in their sample, and was really about how pretty they could make it look. This frustrated me to no end as they wanted all kinds of custom interactions that would require end user training and were hard to use. In addition, they didn’t consider dynamic typefaces which I feel are important in consumer apps as people like me increase the type sizes to make the text easier to read. I pushed back on some of it and made the app work the best I could. I’m definitely not any type of designer, but having been in this business long enough, I know what doesn’t work!

As a user of apps, I find that a good user experience is paramount for me wanting to keep using an app. However, without an appealing visual appearance, I probably won’t enjoy looking at an app. Keeping these ideas in mind makes killer apps. I feel quite lucky to have worked with a designer that has taught me so much about design; I think that seeing how he did the design and how he considered all the interactions will be a huge benefit to me in the future when I work on new apps.

Non Standard iOS Navigation

In my years of being an iOS developer and user, I’ve seen a lot of apps that try to come up with their own ways of doing navigation that don’t follow Apple’s Human Interface Guidelines. Over this time, Apple has changed their guidelines, but usually don’t adopt some of the concepts that apps have inflicted on us.

I do most of my news reading on my iPad (and sometimes on my iPhone), so I’ve taken a look at the different news apps. Some people pan Apple’s News, however it is one of the easiest to use, has consistent navigation, and has a number of hidden features that make it convenient to use. For example, you can scroll up and down using the arrow keys on an iPad Pro keyboard, scroll page by page using option and the arrow keys and navigate back from an article using command and the left arrow key.

Using News, I’m able to take care of my tech, national and world news craving. So that leaves local news. The local news apps seem to shun standard navigation. One app uses an X in the upper which seems more cutesy than useful. If you’re browsing away with an iPad on a stand, you get used to swiping to the right to go back or at worst, tapping the back arrow.

X for close

This is pretty annoying; using the same app on the iPhone is worse because it prevents one handed news browsing. You have to reach up and hit the X button. The X for close is very much a desktop metaphor.

If we take a look at another news app, they at least kept the back button in the upper left, but because they want to show other articles, you can’t swipe right to go back.

Left Hand Navigation

I keep asking myself if the designers and developers use these apps or have done user studies (it’s hard for me to use a lot of apps I’ve worked on because they don’t apply to me, especially enterprise apps). Just watching a user use the app gives huge insight into what can be improved. One of the best experiences I had in the last year was watching someone use one of my apps; this was an enterprise app and thing that I thought were obvious weren’t obvious to the user.

By sticking to standard design paradigms as well as the Apple Human Interface Guidelines reduces user frustration, decreases training time (especially in enterprise apps) and increase the time that people use the apps.

Guest Network with EdgeRouter Lite and UniFi Access Points

Last year, I wrote about setting up a guest network with the EdgeRouter Lite. The post was focused on using an Apple Time Capsule as the wireless access point. Since then I’ve switched away from the Time Capsule and am now using Ubiquiti UniFi APs, so parts of the post are no longer relevant to me and a few people have asked me how to do this with the EdgeRouter Lite and the UniFi APs.

While the UniFi controller software has the option to do a guest network, as far as I can tell, it isn’t exactly what I want. With my setup, you can’t just use the checkbox to turn on the guest network as the current firmware apparently slows things down. So if you don’t check the box, my instructions appear to still be needed.

All of the EdgeRouter Lite steps are taken from my original post, so they may look familiar.

Here are the steps:

  1. On the EdgeRouter Lite’s Dashboard, click Add Interface and select VLAN.

    Add VLAN Image

  2. Set up the VLAN as 1003 and attach it to the physical interface of your LAN. Give it an IP address in the range of a private IP block, but make sure you end it in a /24 to specify the proper subnet. (Make sure it is different than your normal private IP block.)

    Setup VLAN

  3. Click on the Services tab. Click Add DHCP Server. Set it up similar to the image below.

    Add DHCP Server

  4. Click on the DNS tab under services. Click Add Listen interface and select the VLAN interface. Make sure you hit save.

    Setup DNS

  5. Click on Firewall/NAT and then click on Add Ruleset. This is for packets coming into the router destined for somewhere else (not the router). Set up the default policy for Accept. Click Save.

    Add Firewall Rules

  6. From the Actions menu next to the Ruleset, click Interfaces.

    Select Interfaces

  7. Select your VLAN interface and the in direction.

    VLAN In Direction

  8. Click Rules and then Add New Rule. Click on Basic and name it LAN. Select Drop as the Action.

    Add Rule

  9. Click Destination and enter 10.0.1.0/24 or whatever your LAN IP range is. Then click Save. This will drop all packets from the VLAN destined for your LAN. Save.

    Destination Selection

  10. Repeat 1 and 2 above (name it GUEST_LOCAL). From the Interface, select the VLAN interface and the local direction.

  11. Add a new rule. Set it to Accept on UDP port 53 (DNS).

    Rule Configuration

    Rule Destination

  12. Save.

Now it’s time to move over to the UniFi Controller.

  1. After you login to the controller, click the Settings in the lower left.

    Settings

  2. If you’re using your UniFi AP connected to a UniFi Switch, you have to setup the switch to pass traffic for your guest network. If you aren’t, you can skip to step 5.

    Networks

  3. Click Create New Network

    Create New Network

  4. Setup the network as indicated in the next image and then click Save.

    New Network

  5. Select Wireless Networks on the left side.

    Wireless Networks

  6. Configure the network similar to the next picture. Note that I didn’t turn on guest policy.

    Wireless Configuration

Now you can test this by connecting to the guest network and accessing the Internet. Then try connecting to a device on your LAN or connecting to the EdgeRouter Lite. Both actions should fail.

I know that there are a lot of steps to configure this, but they’re not that difficult and you only have to do it once!

I’ve tested this and it is working well on my network; if I’ve missed anything, please let me know!

Ineffective Stop Signs

Soon after we moved into our house (about two and a half years ago), the city installed stop signs at the end of our street. This seemed like a great idea as traffic would speed down the hill perpendicular to our street and make it dangerous to get out of our street.

Over the time we’ve been here, we’ve seen people stop at the signs, slow down at the signs, and simply ignore the signs. I filled out a traffic engineering request to see what the city could do to get people to actually stop. Soon after I did this, I saw the cables on the ground across the traffic lanes that measure traffic. I thought that this was great and that the city was going to do something about people stopping.

Unfortunately I saw the result not too long after that. The result was that the word STOP was repainted larger on the ground in all 3 directions. This solution, of course, is quite laughable.

Stop Sign

Last week I received a call from a traffic engineer (I think) and he explained that the council rep and the community planning group had requested a stop sign to slow down the traffic. The city’s job was done and traffic was slower most of the time; I do have to admit that if this was the goal, it has worked. The engineer suggested that I call the police and try to get them to come out and ticket people. Our police are overworked and they have better things to do than sit at a stop sign; the reasoning was that the route is used by locals and after a few tickets are issued, people would get the message. I don’t believe it, but whatever.

I’ve done my part to try to get people to do the right thing with respect to actually stopping, but without enforcement, the practice will continue. In speaking with a few neighbors who run it, they say that they can see in all directions and it isn’t hurting anyone. That may well be the case, but there will be that one time when someone doesn’t stop and there will be a serious accident.

Conversing Water with Rain Barrels

A few months ago, my wife saw that the city and water district were offering rebates on rain barrels. The rebates were significant enough to pay the entire cost of the barrels, so I decided to purchase 2 of them at Home Depot. Installig the barrels was easy as all I had to do was make Some slight modifications to my downspouts, attach an overflow hose and replace the spigot with a brass one as the cheap plastic one that came with the barrel would break easily.

After a major rain, I was able to fill up and then empty the 2 50 gallon barrels. We had another rain that filled up the barrels, so now I have another 100 gallons of water to use.

This got me thinking about how little having these 2 barrels will do to conserve water. First off, here in San Diego, we typically get rain in a concentrated window which wouldn’t really allow me to collect and empty water more than a few times a year. If I had barrels that collected 600 gallons, I could probably water all our plants for the entire growing season. Second, if I can fill up 400 gallons of water a year (best case scenario), I would save about $2 based on the cost of water.

While the rain barrels look nice and let me collect a little water, they are not cost effective (if I had to pay for them) and really won’t put a dent in my water usage. I can just feel a little bit better knowing that I’m trying to help.

Conveniently Charging Devices

When we remodeled our house 3 years ago, we created a very open floor plan on our main living level by removing a wall. So now we have our kitchen, dining area (it isn’t a formal dining room as we never used one), and living room all together. This has worked out well, but during the planning stages, we realized that there would be a slight issue and that is based on how we wanted our couches, there would be no walls around them to plug in a lamp, charge devices, etc. We decided to put an outlet in the floor (the concrete had to be cut to put in the outlet which was being done anyway for our kitchen island). This outlet turned out to be a great decision.Floor Outlet

We started by plugging in a lamp into the outlet (the lamp is less harsh than the overhead lights) and then when I added a 5.1 surround system, I plugged the wireless subwoofer/rear speakers into the outlet. Of course, we only put a duplex outlet into the floor so when my wife wanted to charge her iPad there (she tends to use it most while sitting on the couch), I dug out a Y outlet and used that.

One device turned into 2 and then turned into more where we had to keep swapping out the cable. After purchasing a few of the Anker 5-Port USB Charger PowerPorts, I thought that using one of these on a table near the couch would solve my problem.

So I bought a small power strip, used industrial strength Velcro to mount it under an end table, and then mounted an Anker 6-Port USB Charger PowerPort under the table as well. Now I had 6 USB ports easily accessible near the couches.

I quickly realized that this solution was ingenious, if I do say so myself! It turns out we have a bunch of devices that occasionally need charging including an Apple TV Remote, a SteelSeries gaming controller, an Aeon Labs Z-Wave remote, an iPhone used as an automation remote, a pair of Bluetooth headphones that I sometimes use with the TV, and a few iPads. I’ve plugged in 2 30-pin cables, 2 lightning cables, a micro USB cable, and a mini USB cable into the Anker. This lets me easily grab a cable and be able to charge anything.

Device Power

Device Power

I’m still not quite sure what to do with the cables, but for now they’re all hanging together.

A New Chapter In My Professional Life

For the last 5 years, I’ve basically worked for the same company. My group was part of a sale about 5 months ago and I went along for the ride. Unfortunately all good things must come to an end and this chapter in my professional life has closed.

This time has been quite good to me and I’ve worked with some amazing people. I’ve worked on a variety of projects and learned all about technologies that I never imagined I’d ever encounter. I’ve also met some people that will remain good friends; in some ways I’m sad to be moving on, but in other ways, this is an opportunity for me to start anew.

I am quite nervous as I’ve only sent out résumés a few times in my 20 year career and never landed a job that I had applied through an ad. All my jobs have been a result of knowing someone or doing something (several were because of the software I’ve written).

Wherever I land, I’ll have to learn about new projects, new development styles, become more versed in a new language (Swift) and work with a new team. Transitions are always difficult, but like all transitions in my career, I’ll make it through this one just fine.

People have told me to take some time and enjoy my new freedom. That, of course, is much easier said than done. For now, I’m working through my ever growing todo list while actively pursuing job leads. Finding the right job is going to be a job in itself!