WEEK 10

User Interface Design

“User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.”

“Users have become familiar with interface elements acting in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction.”

 

Skype App

 

Skype is an application that provides video chat and voice call services. Users may exchange such digital documents as images, text, video and any others, and may transmit both text and video messages.

I recently got the idea to remove this app from my phone, because if I hadn’t used it for 180 days and didn’t use it to call or recharge, I would have been able to get the money out of my account, and I’d have to re-log on the computer to activate it, and I think it brings me trouble.

Recent versions have started harvesting your contact data to ‘suggest’ new contacts to your contacts in a ‘discover’ section that is presented ahead of their favourites. If you or they don’t have many contacts, it is often obvious where these suggestions are coming from, effectively disclosing your contact list to everyone on it. There are no permissions or controls you can influence on this. I think that will leak my privacy and the new version of the Skype let me very confused since of the design, I came in a page is as show in the picture:

If I am the designer, I will let the call page as the first page, just like the iPhone call page, because I do not want when I want make a phone call to communicate with others but I should find where I could make a phone call or video’s button for a long time.

 

Everything stems from knowing the users, including understanding their goals, skills, preferences, and tendencies.

Know about the user. 了解用户.

Keep the interface simple/ Pay attention to patterns. 保持界面简单/注意模式。

Create consistency and use common UI elements. 创建一致性并使用公共UI元素。

Be purposeful in page layout. 页面布局有目的性。

Strategically use color and texture. 色彩和纹理的战略性运用。

Use typography to create hierarchy and clarity/Use visual hierarchy. 使用排版创建层次结构和清晰度/视觉层次。

Provide feedback. 提供反馈.

Make sure that the system communicates what’s happening. 确保系统传达正在发生的事情。

Think about the defaults. 仔细考虑和预计用户带来的目标，创建减少用户负担的缺省值。

 

Reference:

Usability.gov. 2016. User Interface Design Basics [Online]. Available: http://bit.ly/2h5mywk [Accessed 20 September 2017].
Treehouse. 2012. 10 User Interface Fundamentals. [Online] Available at: http://bit.ly/2gGyJTg [Accessed 20 September 2017].

 

 

WEEK 9

DIFFERENT TYPES of PROTOTYPES

“Prototyping is essential for resolving usability issues before launch. It can also reveal areas that need improvement.”

Representation — The actual form of the prototype, i.e., paper and mobile, or HTML and desktop.
Precision — The fidelity of the prototype, meaning its level of detail, polish, and realism.
Interactivity — The functionality open to the user, e.g., fully functional, partially functional, or view-only
Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (this is known as “rapid prototyping”). Others may be built and improved upon, ultimately evolving into the final product.

 

Paper Prototyping

Paper prototyping is a static method which belongs to the Lo-fi prototypes.  This method of prototyping involves drawing how the screens would look like and suggesting how the user would be able to navigate through the app.

The advantages of this method is fast, inexpensive,team-building, easy and a great way of documenting ideas. The disadvantages of this method is unrealistic, false positives, and no gut reactions. It also allows to test the idea with users quickly without getting too involved into the app just yet. Even there are some drawbacks, though, is still a good method for user testing.

Pictures of my paper prototyping from project 4.

Digital prototyping

Digital prototypes are the most common form of prototyping, and are realistic enough to accurately test most interface elements, They are also much easier to produce than HTML prototypes, and digital prototyping is little more advances than the paper prototypes as well as being quick way of being able to produce a neat method of testing. They can be made on websites that offer digital mocking up or they could simply be a series of images on a pdf that demonstrate navigation and options in the design.

The advantages of this method is realistic interactions, flexibility and speed. Paper prototypes may have the edge, but if you want a computerised interface, digital prototypes are faster than HTML. Speed varies from app to app, but most have user-friendly interfaces and features like interactive elements or drag-and-drop. Learning curve and transitioning to code are the disadvantages of digital prototyping.

 

HTML prototypes.

HTML prototyping is only recommended for designers who are confident in their coding ability. It have numerous advantages, such as Technical foundation for final product, Platform agnostic, and Low cost. HTML prototype is a kind of Hi-fi one which needs the knowledge of computer. It was created in the final stage of design process. This kind of prototypes involves more advanced skills. But HTML prototype dependent on designers’ skill level, and some times it could inhabits designers’ creativity.

 

Lo-fi paper prototypes — Test the idea — Digital prototyping — Further represent the idea more accurately — Finally html prototyping — developing an idea with the user and having it more concrete.

 

Reference:

UX Pin, 2016. What is a Prototype? [Online]. Available: http:/bit.ly/2ydAOvu [Accessed 20 September 2017].

UX Magazine, 2014. What a prototype is (and is not). [Online]. Available: http://bit.ly/2fA8Sew [Accessed 20 September 2017].

Kara Pernice. 2016. UX Prototypes: Low Fidelity vs. High Fidelity [Online]. Available: http://bit.ly/2jLpQeb [Accessed 20 September 2017].

Cao, J. (2017). What Is a Prototype: A Guide to Functional UX. [online] Studio by UXPin. Available at: https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/ [Accessed 4 Dec. 2017].

 

 

 

 

 

WEEK 8

Interaction Design Fundamentals

“There are many topics we could include in discussions of interaction design, from mental models, to the sent of information, to direct action. If we’re going to establish a foundation for solid interaction design practices, we need to focus on a few core principles that can be used inform and guide nearly all of our design decisions. These five essential principles of interaction design, consistency, perceivability, learnability, predictability, and feedback, help focus us oncrafting better solutions, experiences, and designs.” with David M Hogue PhD.

https://www.lynda.com/Dreamweaver-tutorials/Consistency/82822/97978-4.html

 

   

Consistency

Change attracts unwanted attention.Consistency is one of the design principles that we like to violate frequently. When consistency is present in our design, people can transfer knowledge to new contexts and learn new things quickly without pain.

Consistency is a key principle in life and in design. Without it we can’t get far. We need to focus on the consistency in our design work, because difference are always noticeable which attract people by unwanted attention. Thus, consistent design pattern can absorb more attention on the important concept. Interface is changeable according to the change of situation but the changes should keep consistency and not be too much because it can cause confusion to users.

e.g. Google App and Google website are following a certain style, users could know what is it quickly.

 

Perceivability

When developing interactive media, users should have the ability to review an interface and identify where they can interact.  Perceivable design means that people can may perceive what it is or how can we use it. In common, designers can through visual, auditory and tactile to show interaction design. A good interaction design work always beyond the visual. User needs cues to manipulate devices and the cues should be direct and not be hidden. In other words, people should not have to guess or look for opportunities to interact.

e.g. Starbuck App has very clear visual cues.

 

Learnability

The ability to easily learn and use an interface after using it for the first time is very important. Learnability makes interaction simpler and intuitive. Users will feel smart and capable of grasping and utilizing newer interfaces, allow for them to feel confident while navigating through the interface.

e.g. Apple website every page let users find what they want easily and always know how to looking for.

 

Predictability

Designers should be able to show users very effective to use demonstrations, instructions, and previews. Good interaction design sets accurate expectations about what will happen before the interaction occurs.

 

e.g. Apple music interface, some symbolic buttons almost all of the people know what it will happened next.

 

Feedback

Communication is two-way. Not only the user interacts with the product, but also the product gives feedback to the user, which makes the interaction proceed to the goals. Feedback is critical when developing interactive media as it provides acknowledgement of the user’s interactions as well as information about their outcomes.

e.g.Client Heartbeat.

 

These five essential principles work together to form a system, and they are tied together by observation, interaction, understanding, and the transfer of knowledge. When meaningful feedback is provided, users will understand how their actions led to certain outcomes and they will learn how the interface works. Essentially users become faster and stronger learners.

Reference:

Lynda.com. 2015. Interaction Design Fundamentals with David Hogue [Online]. Available: http://bit.ly/1OiS8SK [Accessed 26 November 2017].