Where did it come from? My non-computer Daily UI. Part 3 (41–60).

Julia Ku
Bootcamp
Published in
11 min readMay 13, 2020

--

That’s the 3rd part of my analogue Daily UI. If you want to see the rest, please take a look at my other articles:

📌 Part 1 (1–20)

📌 Part 2 (21–40)

📌 Part 4 (61–80)

📌 Part 5 (81–100)

I like to think about design as something that has a long history, which dates back to the time when people didn’t focus on the concept of “design” and most of the forms came from functions needed.

Let’s think about something that most of us use every day — the keyboard and its QWERTY layout. This layout appeared already with the first typewriters. At the beginning, characters were arranged alphabetically. However, they were mounted on metal arms or type bars that would collide and jam if neighbouring arms were pressed at the same time or in rapid succession. To avoid the jamming, the keys and the typebars have been arranged so that letters that were frequently used in sequence didn’t come from adjacent typebars. This is how the standard that appears today on keyboards around the world was created. Even though jamming is not a problem with electronic keyboard and the style of typing has changed, we are still committed to this layout.

There are many more such examples, and with computers and digital world their evolution has become even more interesting.

My analogue Daily UI.

Daily UI was created with the user interface of software or computerized devices in mind. In my challenge, I wanted to analyze and reflect on the roots of these elements.

Some elements were (or seemed) obvious, with some I was puzzled. In the world of computers, interaction technology has changed, and there are more possibilities and functions. I think even more will appear in the future, in different dimensions and forms. Our habits and culture changes much slower than technology. This means that although technical progress is constantly introducing new ways of interacting with objects and products, people are unwilling to change their habits. Many of elements of this challenge are based not only on the appearance of objects of the past, but largely on human behavior, possibilities, expectations, habits and mental models.

PART 3— Daily UI 41–60

041. Workout Tracker

A workout tracker

A workout tracker now primarily refers to wearable devices that monitor and record our fitness activity. Electronic activity trackers are fundamentally upgraded versions of pedometers. In addition to counting steps, they show a graph of the overall physical activity, calculate calorie expenditure, can also monitor heart rate and quality of sleep and even more.

042. ToDo List

To this day, even in the electronic version, it works similarly . We note all tasks and cross it one by one after it‘s completed. In the digital version, it can be more complex, for example have the status “in progress” or show the estimated time.

043. Food/Drink Menu

In addition to making editing easier for those who create such menus and possibly faster navigation for customers, the food menu remains the same. The selection process is similar to online shopping experience, even when sitting in a restaurant. But we still often don’t see what exactly we have to pay for, we have to believe the descriptions.

044. Favorites

Marking favorites has been around for a long time with printed materials. We use bookmarks, post-its or tags to select the part we want to find later. Now, we can also do it online, and even one of the “favorites” icons refers to the bookmark.

045. Info Card

Cards are grouping several related pieces of information together for providing an entry point to further details on this content. In the non-computer world, this could be a leaflet of a business announcing what we can expect there, a brief description of the article on the following pages, or summary information on the book.

046. Invoice

It works just like a printed (or handwritten) invoice or bill. It’s still the customer’s proof that the payment has been made and should provide with all the information he or she may need about the transaction. Its basic elements are a list of purchased products, total cost, seller data, date. In the electronic version some new elements appeared, e.g. shipping costs, advertising related products, the method of payment.

047. Activity Feed

Depending on the type of activity, it can be a few things. For example: the history of our bank transactions, notes from completed trainings, travel journal (it’s not a diary), child development notes and many more. Today many activities are automatically saved on our devices and we can always see their parameters immediately. It’s also easier and much faster to analyze them.

048. Coming Soon

It’s known that the first day of the promotion is not the first day of product appearance. This kind of advertisement is also known online.

049. Notifications

Image: Unsplash

Receiving notifications is nothing new. Few decades ago time to receive notification about something that happened was rather calculated in days (e.g. letter), along with technological progress it shortened to minutes or hours (e.g. telephone), and today it can take even few seconds (we all know “…few seconds ago”). There are also many more types of notifications and many more sources of them.

050. Job Listing

The form of job listing remains very similar. There are of course some improvements: the number of offers can be almost infinite, contact is electronic, it’s easier to search and the advertising length limit is usually the same for everyone. Promoting is still about making it most visible. In the past, it meant more place in the newspaper, today it’s usually a featured job ad.

051. Press Page

Promotional or press materials (descriptions, photos, graphic materials) used to be sent to the press, or distributed at the events. Today they are sent less and less often but they can be downloaded from websites.

052. Logo Design

Identification signs have been with us for a long time. The concept of logo already appeared on a large scale in the Stone Age, when the craft industry developed. Craftsmen wanted to mark their products, strike a symbol about its origin and testifying to the quality of workmanship. Today, the creation of an identification mark has become necessary to gain and maintain a place on the market. Usually, such a small symbol says more than a long description. After all, if we see a colorful camera logo, we know that here we can share pictures with our friends. Like in a non-computer world — if we see two yellow arches, we know that’s the place where we can quickly get a burger and fries for a low price.

053. Header Navigation

We know similar, but simpler navigation from binders. Sometimes, among a huge number of documents, it helped people to find the right section. It was located along the long side of the page, which is different than in the world of the Internet. With websites where the navigation is different, it’s often (but not always) at the top of the page and is usually not turned 90 degrees. It might be also much more complicated, because one website can be equivalent to a huge number of binders.

054. Confirmation

Image: www.ebay.com

First of all, it is worth noting that we can get confirmation and that we can confirm something. The latter used to be done on paper, sometimes with a handwritten signature. Our signature in this case is clicking “confirm” and the signed document is a confirmation.

Getting confirmation is a getting a document signed or issued by someone else, but in relation with our case.

Not much has changed here. Confirmations still apply to similar situations, such as confirmation of admission to the university, creation of an account, hotel booking, shopping etc.

055. Icon Set

Image: www.lancewyman.com

Icons are digital pictograms — small images that represent the concept (it can be activity, object, place and whatever we can imagine). For us, people, a picture works as a better signal than the text — it is immediate, we read it even if we don’t intend to, and it has no language barriers. Icons, pictograms, symbols have been used for thousands of years. We know such a set of icons from everyday life — from streets (road signs), buildings (wayfinding signs), products (icons e.g. camera). And now, of course, from digital products.

056. Breadcrumbs

Image: www.mijksenaar.com

Marking the way to know where to return is one of those things the internet is doing a lot better with. It’s easier to go back “home” in a complicated website (one click should be enough) than to find the way home when we got lost in the woods. Before the world of smartphones, we marked points on maps (or simply left breadcrumbs? 🍞). In some buildings, such a role may also be played by a wayfinding system, which doesn’t show our path in detail, but the structure thanks to which we can to keep track and maintain awareness of our locations.

057. Video Player

Image: www.thinkprogress.org

We can say that such fields as oral narrative, literature, theater have contributed to the fact that today we have a video player on the computer. They contributed to the creation of the cinema, which is now one of the favorite forms of entertainment for most people. Therefore, the video player had to appear in a computer world. With the development of technology, the world of cinema and the moving image in general has taken on another dimension, and access to films of every kind has become incomparably simpler than it was a few decades ago.

058. Shopping Cart

Image: Unsplash

Buying many things at once is also possible online. The form of the icons representing such combined shopping comes of course from the shopping carts we know from the supermarkets. The idea of a shopping cart dates back to 1940.

059. Background Pattern

The function of such a background in electronic devices is similar to the printed materials. It’s usually decorative and sometimes supposed to characterize a given company, product, brand.

060. Color Picker

Image: www.pantone.com

Computers have brought a new way of picking colors. It’s the equivalent of the color sampler, which can be used in architecture, industrial design, tailoring. I think it’s one of the few things that offers more possibilities in the nondigital world. In addition to the color, there are also probes that show colors and different textures. In the digital world, there are no different textures so far, and the choice of color is enough. This is something that would be very useful, when it concerns a physical thing, e.g. choosing a color when buying furniture.

It was fun 🤓

It was quite a long journey, but interesting and motivating me to reflect over so many UI elements, both traditional and digital. There are a few things that caught my attention:

🔴 I was aware of that, but now I understand even better why we say the DIGITAL WORLD. A very large part of the real world appears in the internet or in digital version. We can learn, talk, send, receive, buy, sell, read, write, work, find a job, find love, check maps, see almost every place in the world… and more. I tried to avoid saying “the real world”, rather talk about it as a non-computer world, because the internet and digital products are also parts of the real world.

🔴 It’s clear that almost everything that I analyzed became faster, easier to access and generally enables many more possibilities (I don’t say that it is easier to use, because it depends on the level of tech-knowledge).

🔴 With the development of technology, we can do more and more things ourselves. Many activities once required the involvement of a group of people, today they are increasingly replaced by technological solutions.

🔴 I think that the speed of technology development also has a significant impact on generational differences, which will be even bigger than before. At this point, even a few years of difference can affect our way of life, habits, and interactions with other people. Maybe after some time it will be completely normal that people see each other mainly with the help of artificial intelligence and we won’t know the world that relies on a complex system of face-to-face meetings in real-life. I am very curious which products and concepts that we use on a daily basis now will disappear, what will change and how it will change.

🔴 I was a bit disappointed with the tasks of the Daily UI. They often seem underspecified and too general. I’m not sure if drawing screens taken completely out of context is such a valuable exercise. Working on this series of posts, sometimes I felt like skipping something that seemed too general to me, but I just don’t like leaving unfinished things. And without all 100 it would be an unfinished challenge. I think the list could be updated and refined, but it’s great that such things exist!

Thanks!

If you want to see the rest of my analogue Daily UI, you’ll find them in the other articles:

📌 Part 1 (1–20)

📌 Part 2 (21–40)

📌 Part 4 (61–80)

📌 Part 5 (81–100)

🔴 If you have any comments, suggestions, ideas or just want to say hi, I will be very happy to hear from you — ✉️ julia.a.kuczynska@gmail.com

Pictures were taken by me, unless stated otherwise.

--

--

UX designer, exploring the history of human-computer interaction and the roots that shape aesthetics and functionality. www.juliaku.com