UI Web Design

UI Web Design (User Interface) no doubt ensures that visitors can effectively browse a website with virtually no issues thus creating a seamless user experience.A well laid out website development process will no doubt provide the correct front end as well as website functionality thus resulting in a better website which would fall in the best websites category.. Common sense dictates that ease of use is what enables products to have wider appeal to a large audience. On the one hand, some argue that the functionality of a product should dictate its design. From this perspective, a product’s main focus is to get the maximum output out of its input. An example of this is Sarah Doody’s criticism that “spending over 20 hours doing the visual design on a login modal is a little excessive” additionally the Toyota Prius is not very visually appealing because its purpose is to have better gas millage. On the other side, however, others argue that design should be the main focus of a product. In the words of Steve Jobs, one of this view’s main proponents’ states “we made the buttons on the screen look so good you’ll want to lick them.” I think what Steve Jobs is trying to say is that there are a lot of competing products that does the same thing. Therefore, design is what separates one company from another. Yet is it always true that the superior design will provide the competitive advantage in the marketplace? If this was the case, then there would be more luxury cars on the main road. Therefore, the main issue with design vs functionality is how do we balance design with functionality. By looking at the field of web development, specifically in field of U.I design, it is possible to see what are the tradeoffs that a web developer faces when they try to balance design with functionality. Ultimately the aim of this essay is the explore the history of U.I design, what constitutes good U.I design, and the future of U.I design.

Although the terms U.I/U.X designer are often used together, what U.I stands for is user interface and U.X stands for user experience. The reason they are often used together is because the user interface often contributes to how the consumer uses the website and contributes to their experience on the website. According to the question and answer site Quora, Digital Marketing Specialist Mridul Kumar acknowledges that user experience design is “the process of increasing overall customer satisfaction and loyalty by focusing on the ease and pleasure in the interaction between the product and the customer.” Whereas U.I design “refers to the look, feel and interactivity of a product with the user.” This is a broad definition; an example would be the menu bar on a web browser.

UI Design - Seattle Web Design

The menu bar allows user to perform simple tasks such as going backward on a page, refresh the page, and access the menu button. These buttons allow user to carry out their desired task easily and this improve the user’s overall experience with the chosen web browser.

Product Strategist Ryan Singer defines U.I as “the arrangement of inputs and outputs that enable people to apply the computer’s functions to create the outcomes they want.” Basically, Singer is saying that the arrangement of buttons or layouts can help consumers use the website and tell it what to do via the user’s interface. For example, if I am using a calculator web application, the arrangement of the numbered buttons and the buttons that has the +, -, ÷, ×, would be the user’s interface because those buttons tell the computer that I want a certain number to do an operation with another number.

In addition, the ingredients of user’s interface can be boil down to four items, these four items are “functions, inputs, outputs, and navigation”. These properties are important because they define the functional aspects of U.I design. I mentioned earlier that U.I design is the combination of functionality and form, therefore the four properties that I have mentioned are the essential bare bones of what a good U.I have. Although the four essential ingredients may seem basic, it should in fact concern anyone who cares about web development. After all this is one of the reason why Facebook and Instagram have such a wide appeal, their simplistic U.I makes it easy to input new photos, navigate through the user’s friend’s list and perform basic task.

UI Design - Seattle Web Design

By extension, this would explain why minimalistic design is one of the most popular style nowadays. There are more people on the world-wide web now than there were when the internet started, this would mean that those people have a wide range of technical abilities with the computer. Therefore, if businesses want to attract more customers, it is mandatory to have a U.I which allows users to navigate their websites with ease.

Consequently, this raises the question: what makes a good U.I and how does one test it? In response to that question Ryan Singer describes a way to test out the U.I is to “research [the] users to find out how adequately the interface fits their needs and habits.” To put it another way, if the web developer discovers that the user would like to buy a product however for some reason the buy button requires five clicks as oppose to two clicks like most items, this would require a U.I redesign because the user’s “habits”  to buy most items is significantly different from the item that requires five clicks. The change in user’s habits could also result a loss of sales because buyers are afraid of unfamiliar environments.

This essay emphasizes the significance of minimal design; therefore, it is important to describe what minimalism is. Steven Bradley describes minimalism as a “simplicity of style…achieved by using the fewest and barest essentials or elements to maximum effect” with designs that has “more white space, better typography, grid layouts, and less colors.” Admittedly in the eyes of an average consumer, minimalism looks easy to create even though Steven Bradley argues that “to master minimalist design means to master design. It’s harder to pull off because you can’t hide behind ornament and decoration.” Basically Bradley’s point is that minimalism looks easy to create because a master designer can make any design look effortlessly.

I agree that minimal design can look like child’s play because a master designer can make it look easy, however how did this minimal trend arise from a long history of computer technology development? U.I Industry Writer Daniel Rounds writes that one of the first batch computing computers did not have a graphical display similar to modern day laptops/desktops. A graphical display is important because it allows interaction and correction with the computer in real time, this reduces processing time and helps fix errors in the code. However, the first computers “consisted of the input of a punched card…” This came from the logic that that a user interface would be “an unnecessary expense because the software was designed to utilize the processor to the maximum.” This quote argues that it is better for the software to use 100% of the computer’s power to perform its task rather than split up the computer’s computing power and have 50% software utilization and the other 50% to go to a graphical display. Eventually the “Command-Line Interfaces were introduced [which] greatly reduced the latency to seconds instead of days or hours…” This discovery is significant because an increase in computing powers allows scientist and engineers to think of new ways to improve the interface because the Command-Line Interfaces allows user to respond to “real time data.”

It follows then that the next integration of user interfaces is to have a video display terminal and have the ability to modify the data on the screen as oppose to “having them printed. It also made economic sense by removing the need for ink and printing materials.” According to Daniel Rounds the first GUI was “developed by researchers at Xerox Palo Research Center in the 1970’s” which eventually lead to the first “fully integrated desktop computer was the Xerox Star released in 1981.” This lead to many other computer companies copying the feel of the graphical GUI such as the Max OS System 1 that was released in 1984. It wasn’t until Windows 95 that computers had a “small close button and a resize thumb on each window”.

In my opinion the impact of these graphical innovations allows a more intuitive approach to using the computer. The transition from punch cards and a monitor display had a tremendous impact on the efficiency of computing power. Furthermore, a punch card had to be verified and check if there were any mistakes on the card themselves.  This would result in an increase of work time and frustrations among employees because the punched cards had to be retype and checked again. Additionally, a standard work room would have many Batch computers that were very loud and the lack of real time interaction with the console created an inefficient work environment.

The standard way of thinking about U.I design is that it gradually improves over time; a computer monitor with windows and a mouse pointer that can interact with the screen is much easier to use than typing commands into a terminal. At the same time, I believe that U.I design stems from trial and errors, I also believe that there are certain principles that are the backbone of good U.I design. According to the book Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design by Larry L. Constantine and Lucy A.D, the six design principles of U.I are structure, simplicity, visibility, feedback, tolerance and the reuse principles.

The structure principle demonstrates that the layouts of a website needs to be consistent and have a uniform feel to each other.

UI Web Design

An example of bad structure principle

This is a bad example because the text boxes have different size and color. This lack of color cohesions leads to an inconsistent design. The simplicity principle states that the design should make common task easy to do and provides good shortcuts to longer procedures.

web design services - UI Design

Authentic Weather App by Tobias van Schneider.



This U.I exemplifies the simplicity principle because the app has three options on the screen. The Facebook and twitter buttons allows user to share the weather status on their account. Whereas the top screen allow user to check what the weather is like. The visibility principle claims that a website or a product should present the options and materials to the user without confusion or be a distraction to the consumers.

The amazon website shows that a website can be easy to navigate with a range of options  an amazon buyer would need access to.

The feedback principle states that one’s design should keep user inform of their own actions or errors that might occur. Amazon has the cart icon to show the user how much items are in their cart and if they have successfully put an item into their carts yet.

The reuse principles acknowledge the user’s need for familiarity and argues that the user’s interface should be easy to remember and the user does not need to memorize new menu buttons or layouts. These properties are saying that when the user visits the website over and over again, there should be a sense of familiarity of where each buttons are or how to navigate the website. This sense of familiarity establishes a sense of trust between the user and the website because human beings tend to gravitate towards thing that are familiar to them. Another example would be the fact that Facebook has gone through many updates, however their website still feels familiar to use for most user. This is a good use of the reuse principle because Facebook is able to capture the feel and likeness of its website and still implement new changes and updates.

Eric Bieller who is a U.I Design Course Lead view that the future of U.I design will expand greatly due to the improvements of voice recognition software. For example, with Apple’s Siri it is possible to “set appointments, search the internet, set timers and other simple tasks…The potential of this type of human-computer interaction is absolutely huge, but we’ve still got a long way to go.” Just as the first Batch computer did not have a graphical display, I believe that a similar trend will happen with computers and voice recognition software. Within the “next five years, the adoption rate of speech recognition will be over 80%” This is because the current trend in technology is to have things get smaller. However, with a smaller screen “interface will become much hard to navigate…however voice certainly promises a deeper and more ubiquitous method for interacting with our devices.”  This is similar to how in the past, after the Xerox Star was released with a graphical display interface, many other computer manufactures follow suit. I argue that speech recognition will the next major improvement similar to how graphical display was a game changer in 1981.

Indeed, it is highly likely that with a combination of new technologies and sound recognition software, the virtual world and the real world could mesh together to create a world where 3D graphics or applications can interact with the real world without a need to process it all on a computer screen. In the future “interface will no longer be trapped in tiny screens but instead inhabit our own three-dimensional world.” When interactions are no longer limited to what is on the computer screen, this would increase the possibilities of how technology can help other people. For example, imagine a future where blind people can have their cell phones detect where they are and navigate them through traffics, the U.I would need to be off-screen and be easy to use for those that have never seen a screen in their life. Although U.I may seem like a trivial aspect in web design, it is in fact crucial in terms of today’s concern over accessibility for those with disabilities. My conclusion, then, is that, U.I design is a necessity for consumers who has little computer knowledge and for those who cannot use a computer because of physical impairments. The field of U.I design contains an immense potential to open the doors of technology for those that are physically impaired.


References for UI Web Design –

UI Web Design – Doody, Sarah. “Let’s Build Products, Not Pixels: Always Choose Function Over Form.” Sarah Doody. Sarah Doody, 05 Apr. 2013. Web. 18 Feb. 2017. <http://www.sarahdoody.com/lets-build-products-not-just-pixels-function-over-form/>.

UI Web Design – Kumar, Mridul. “Re: What Is User Experience (UX) and User Interface (UI) Design?” Blog comment. Quora. Quora, Inc., n.d. Web. 15 Feb. 2017. <https://www.quora.com/What-is-user-experience-UX-and-user-interface-UI-design>.

UI Web Design – Singer, Ryan. “What UI Really Is (and How UX Confuses Matters).” Medium. A Medium Corporation, 20 Jan. 2015. Web. 16 Feb. 2017.

UI Web Design – Bradley, Steven. “Why Minimalism Is the Most Important Design Style to Master.” Vanseo Design. Vanseo Design, 09 May 2011. Web. 18 Feb. 2017.

UI Web Design – Rounds, Daniel. “A Short History of Computer User Interface Design by Usabilla.” Usabilla Blog. Usabilla, 13 Dec. 2016. Web. 18 Feb. 2017.

UI Web Design – 1964 IBM 029 Keypunch Card Punching Demonstration.” YouTube. YouTube, 07 Sept. 2014. Web. 18 Feb. 2017. <https://www.youtube.com/watch?v=YnnGbcM-H8c>.

UI Web Design – Constantine, Larry L., and Lucy A.D. Lockwood. “User Interface Design Tips, Techniques, and Principles.” User Interface Design Tips, Techniques, and Principles. Ambysoft, n.d. Web. 18 Feb. 2017. <http://www.ambysoft.com/essays/userInterfaceDesign.html>.

UI Web Design – Busch, Kat, Caitlin Colgrove, Frank Li, Nora Willett, and Remington Wong. “Psychology of Trust on the Internet.” User Interfaces: Examples of Bad UI. Stanford, n.d. Web. 18 Feb. 2017. <https://cs.stanford.edu/people/eroberts/cs181/projects/2010-11/PsychologyOfTrust/ui3.html>.

UI Web Design – Schneider, Tobias Van. Authentic Weather. Digital image. Behance. Behance, 17 Feb. 2013. Web. 18 Feb. 2017. <https://www.behance.net/gallery/7196565/Authentic-Weather>.

UI Web Design – Bieller, Eric. “The Future of Human – Computer Interaction: What’s Next?” CareerFoundry Blog: Build a Career You Love. CareerFoundry, 6 Sept. 2016. Web. 18 Feb. 2017. <http://blog.careerfoundry.com/ui-design/the-future-of-human-computer-interaction-whats-next>.


Interested In hiring this web design company for your next project?

Learn more about our website services such as WordPress,  AnimationHTML 5, CSS, PHP, Pythonwebsite hosting, web designing, website security and HTTPS setup at Seattle WordPress Website Design. There are other website solutions we provide and are experts in, such as social media society. May be your interested in learning more? If so refer below:

Contact us for a quick quote, you'd be glad you do and understand why we believe we have mastered the science of web design and provide one of the best websites offered in the market. Interested in reading more? Refer below: