Fasai Iron

🧤 What is Usability?
🌷Usability is a measure of how well a specific user in a specific context can use a product/design to achieve a defined goal effectively, efficiently and satisfactorily. Designers usually measure a design’s usability throughout the development process—from wireframes to the final deliverable—to ensure maximum usability.
💌 “Usability is about human behavior. It recognizes that humans are lazy, get emotional, are not interested in putting a lot of effort into, say, getting a credit card and generally prefer things that are easy to do vs. those that are hard to do.”
✨ A design’s usability depends on how well its features accommodate users’ needs and contexts. Therefore, you are responsible for your design’s usability. It should contain these elements:
1. Effectiveness —> It supports users in completing actions accurately.
2. Efficiency —>Users can perform tasks quickly through the easiest process.
3. Engagement —> Users find it pleasant to use and appropriate for its industry/topic.
4. Error Tolerance —>It supports a range of user actions and only shows an error in genuine erroneous situations. You achieve this by finding out the number, type and severity of common errors users make, as well as how easily users can recover from those errors.
5. Ease of Learning —> New users can accomplish goals easily and even more easily on future visits.
🌈 Summary
- Good design is about usability.
- It is about ensuring that systems are accessible to all and that designs are acceptable for the people and contexts in which they will be used.
- Designers need to evaluate their designs with people and involve people in the design process.
- Paying attention to design principles can help sensitize the designer to key aspects of good design.
- Usability is concerned with balancing the PACT elements in a domain.
- Acceptability is concerned with ensuring designs are appropriate to contexts of use.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🧚🏻‍♀️ What is an envisionment?
🔮 Envisionment is concerned with making ideas visible; with externalizing thoughts. Envisionment is needed to represent design work to ourselves and to others.
🗣 Storyboarding is a technique taken from film making – using a simple cartoon-like structure, key moments from the interactive experience are represented.
🚘 Navigation is a key feature for many systems. (Site map Guideline)

🚦Navigation maps can usefully be redrawn many times through the project lifecycle, as poor navigational structure is one of the main reasons people turn off a website.

📍The aim is to focus on how people will experience the site. (Click——> data)
🔑 A prototype is a concrete but partial representation or implementation of a system design.
> Wireframe
> Layouts : Color, Font Typography, Graphics.
📺 Presenting design ideas clearly and appropriately is a key skill of the designer.

💡The design process is a long one with many different stages, there are many different people involved and there are many different reasons for giving a presentation.

📌 Finally it is important to be clear about what is being highlighted by the presentation.
🧤Summary

🌈 Envisionment – the making concrete of design ideas – is a key feature of design. All aspects of the system can and should be envisioned: concepts, functions, structure, interactions.

👥 Envisionment aids the generation, communication and evaluation of ideas.

🎈 People should take an active part in envisionment wherever possible – the process allows essential feedback from customers and clients.

🌟 Basic techniques include storyboards, different forms of sketch, mood boards, navigation maps and concrete scenarios.

🌷 Prototyping may focus on a vertical or horizontal slice through the system, or cover the whole system, and may evolve into a final product or be thrown away and re-engineered.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🗣 What is Seven Cs of Effective Communication?
✨ One sure way of improving your communication is by mastering the 7C’s of communication. These apply to both written and oral communication and practically guarantee improved results.
.
🎈This involves checking your communication process against 7 key factors which can be categorised as-
- Completeness >> Must convey all the facts required by the receiver.
- Conciseness >> Least possible words saves time for sender & receiver.
- Courtesy >> Think about the receiver, their viewpoint & be respectful.
- Concreteness >> Be definite & specific, not vague.
- Correctness >> Accurate facts & figure, proper use of grammar, spellings & language.
- Clarity >> Be clear with your message, keep it simple.
- Consideration >> Consider the audience & their requirements.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

💌 Lab 11, Group 8-YVStillHERE.
🔰 Lab session ——> Week 13
📍Topic: Developing your UX- Layout Wireframe and Sitemap.
🎉 Goals: Set up layout, wireframe and sitemap.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🌷Lab 10, Group 8-YVStillHere.
🧪 LAB SESSION: Delivering navigation and approach.
⚽️ Goals: define your navigation, user flow & emphasize team’s project idea.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

💟 What is Content Strategy?
📜 Tell a story
Telling a story, you put your product in context and give meaning to your users.
🧏🏻 Remember the microcopy
Usability testing is very effective at uncovering spots in an application where microcopy would be useful – it’s often painfully easy to see where users hesitate or go wrong due to confusion.
🪄 Learn the jargon
The people who use your product have a language all their own. When you learn to speak their language, you can ensure your application doesn’t miss the mark.
🌟 Plan a content audit
Planning and organizing your content audit can be as easy as 1-2-3:
1. Set up a spreadsheet with sections for Screen, Attribute, Messaging, Call to Action, Audience, and Notes

2. Consider each attribute on each screen (Attributes include headline, sub header, paragraph text, image, video) and the relevant messaging.

3. Use the completed spreadsheet to help make decisions on what content to keep, and then track the creation of new content.
♻️ Rewrite, reuse, republish
Quote your website. Make a blog post into a video. Make a discussion into a SlideShare by adding images to illustrate the main points. Quote blog posts as forum responses.
💌 Supplement with synonyms
Problem ——> Different people use different terms when they think about your product.

Solution——> Create a taxonomy! By writing up a list of synonyms for each important term relating to your company, product, and application.
🌐 Vary your medium
Audience tends to surf the web online during work hours, they may find a blog post more helpful than a noisy video. Or if you have a particularly complex piece of information to get across, an infographic can help clarify it.
🧪 Split test your content
After creating new content, instead of simply replacing your old content, conduct an A/B split test to see which delivers better results in the real world. Tools like Google Website Optimizer can help you automate the testing process, allowing you to run tests easily by installing a simple tracking code.
👤 Account for edge cases
Edge cases are a reality in every design. When dealing with a database application, understanding the real data that goes into the system is key to identifying potential edge cases which can cause the application to break.
🚫 Anticipate errors
Considering the user experience includes considering how we present the user with error messages. Detailed and appropriate (and sometimes even humorous) copy helps the user to move forward. Ask developers to provide a list of error messages, along with context such as when users will see those messages. Then you can create new error message copy appropriately.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🔥 What is Front-End Development?
🔔 Failing to notice changing information has consequences. Build in visual cues to draw attention to information that has just changed. Here are some ways to transform the text on your page:
• Change the background color surrounding the item in question
• Change the font color or font weight
• Consider adding in some animations, either via CSS3 or JavaScript
💬 Load lazily
Problem ——> Traditionally loading pages allows all the data to load before anything appears onscreen. This often leaves users waiting, which nobody likes.

Solution ——> Use lazy loading: get all the static page elements loaded first, and then load the immediately visible data. As the user scrolls down, more elements can load, progressively.
🛠 Build with progressive enhancement
To provide a good experience for everyone:
1. Focus on content first. Build a basic experience that everyone can access, which delivers your content in a clear, readable way.
2. Apply the visual presentation next, for devices that can handle it.
3. Layer the interactivity on top, for those capable devices.
📱Strategize for the small screen
Consider using CSS media queries to make a few small layout and navigation adjustments for smaller screens, or fall back on a nicely-designed text-only stylesheet if you need to. These considerations need to be on your radar, especially if you don’t have buy-in to go forward with a full-scale mobile effort.
🔎 Research your UI approach
Which UI development approach is better for you: programmatic or declarative?
Programmatic
• Develop the UI in code.
• Can be harder to learn, read and understand.
• UI is coupled with your code.

Declarative
• Create the UI in markup.
• May not provide much out of the box functionality.
• Flexible -- often the better choice.
🔸Use sprites to improve performance
Create a sprite ——> Use background-image positioning in CSS to display only the icon you need in any given instance.
🌟Take advantage of HTML5
If you’re worried about browser support, never fear. Browsers ignore any input type they don’t understand and render it as a normal .
🌐 Organize your CSS
Applying a standard organization plan to your CSS code will prevent it from becoming bloated and disorganized, as is all too common in large projects.
🗂Consolidate your files
Consolidation and minification can be done automatically using a tool such as Minify.
🌈 Distinguish CSS classes from IDs
Combining CSS selector types without a structure produces messy, unmanageable code. Keep your selector types in line with a general guideline. Plan how to structure your markup in advance, but accept that every situation is unique and that you will encounter exceptions.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

📣 What is UI DESIGN?
🌏 Prioritize top tasks
🌟 Prioritizing is much easier once you know your audience and their goals. With a little prioritization, your screens can become cleaner, crisper, and far more commanding. If you have multiple goals in mind, identify the primary goal by asking these questions:

🔻Who ——> is my ideal audience?
🔻Where ——> do I want to send them on my application/site?
🔻What ——> call to action will best direct users to the primary goal?
🔻How ——> do the secondary goals relate to the primary goal? (You may find that your secondary goals are so unrelated that they deserve a separate page altogether!) How many goals do I have altogether? Are they all for the same audience?
📚 Obey real-world rules
🍎 Almost every interface you design will take some cues from real-world physical effects like lighting and perspective. Make sure those effects are applied consistently and sensibly; otherwise it’s easy for users to become disoriented. (Apple’s iBooks app uses realistic lighting to depict a bookshelf.)
📝 Sketch your ideas
🖌 Don’t be afraid of sketching! A quick drawing is often the best way to visually articulate goals and requirements.

🟣Simple ——> Most interactions can be represented by simple rectangles, circles and triangles.
🟡Complex ——> Use digital tools to help such as Figma. (Figma —> Next Round UI Screen Design)
🔎 Research UI patterns
📊 Many sites exist to showcase UI patterns (reusable widgets that solve common problems) such as pagination, tabs, or faceted navigation. In addition to saving you time and effort, UI patterns make use of existing conventions. Since these patterns are already familiar to users, they are usually preferable from a UX perspective, no matter how innovative your prospective new solution might be.
📲 Follow the MAYA principle
🔶 MAYA (Most Advanced, Yet Acceptable) is a maxim to live by. Designers and innovators must pave the way toward the future,
but in gradual steps—delivering experiences that break new ground, but still contain enough of the familiar to be acceptable to the people for whom they’re designed.
📮 Document your UI patterns
🖼 Create a UI pattern library for your project – a living document (preferably in code) that compiles all the reusable patterns you have created, making them clear and easily available to everyone on the team.
⚠️ Use tabs effectively
🪄Use your tabs as simple as possible which means trying to make your tab not become overused.
⏳ Reduce clutter: show actions on hover
💌 Clean up the interface by only showing those actions when the user hovers over the row with her cursor. (Tip: Hover doesn’t work for mobile devices. Instead, consider cutting down functionality to allow only the basics, or filter the functionality into a few different pages.)
🛠 Provide lazy registration
🔐 Asking for an immediate sign up, let users enjoy the service first, and then provide them a way to save their information and “lazily” create an account. (Security - Hack)
💟 Take advantage of web typography
🔹 Web typography is emerging as a solution. TypeKit and Google Web Fonts, among others, allow designers to use a wide range of fonts while leaving the text in HTML, where it can be read by search engines and screen readers.
🖍 Design your color palette (but not from scratch)
🔰 Create a color scheme for your new product or application, don’t just make it up as you go along. Color scheme you design, include one or two neutral tones for the text-heavy areas.

🖥Some tools to get you started include:
• Adobe Kuler for Designers
• Color Scheme Designer
• 21 Stimulating Color Palette Tools
♻️ Provide instant feedback
🌀 Form fields should be designed with the best possible user experience in mind:
1. Fill out a form.
2. Receive an alert “Something on this form is incorrect!”
3. Give up and go home.
💬 Wait. What? Let’s try that again...
1. Fill out a form, and see clear indicators of whether your information is being accepted.
2. Correct errors quickly as you go.
3. Success!
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🔥Lab 9, Group 8-YVStillHere.
🌟In this activity, our group use software tools to create UI and Prototype.
🔰During the last week, our group has a design plan. And this week, we've taken action to create and design a project progress.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

💥 Lab 8, Group 8-YVStillHere.
🌟 In this activity we learned about the use of Figma and the basic elements of Figma.
🌷Our group has brainstormed ideas on how to use Figma as follows:

🔅1.Application name ———> KFANsCLUB

🔅2.Theme

🔅3.Devices in the app
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🌷What are the differences between user-centered design and design thinking?
🌟Since user-centered design and design thinking both help find solutions to people’s problems, you may be wondering what the big differences between these two design methods are. While the steps and general mindset of each are quite similar, the most notable difference is their primary focus.
🔎User-centered design focuses on fostering deep empathy with the population you are designing for. The goal is to create solutions with users’ needs and feedback at the forefront of all design decisions.
🔰User-centered design is a great approach when you want to design a highly desirable product for a specific audience.In the UCD process, the user is the focus from first ideation to development and release.
❗️While design thinking also requires great knowledge of the user, it also takes technological feasibility and business goals into consideration. This is a method that can be applied to more than just product development.
🔥Design thinking utilizes abductive reasoning to identify and solve complex problems that may affect product design or organizational policies, processes, and function.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🗣 What is user-centered design?
🌟 User-centered design (UCD) is an iterative design process in which designers focus on the users and their needs in each phase of the design process.
💌 User-centered design asks designers to employ a mixture of investigative (e.g., surveys and interviews) and generative (e.g., brainstorming) methods and tools to develop an understanding of user needs. The UCD process doesn’t prescribe specific methods or tools to use, however, as with Design Thinking, UCD does provide concrete steps for application. The five-step UCD process includes:
🔍 Research phase – typically contextual enquiry, or interviews
💡 Concept phase – ideating concept prototypes to design and test
📋 Design phase – initially medium fidelity, but increasing fidelity through iterations
⚙️ Develop phase – building the de-risked design
✏️ Test phase – utilizing the developed product
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🚦Lab 7, Group 8-YVStillHere.
💌In this activity we are brainstorming figure out your persona get to know your primary persona (potential users).
🔅Their behavior: what they do/ do not do, say/ do not say.
🔅Their perception: what do they see, sense, or experience.
🔅Their feeling: how do they feel, what motivates them.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

📮Experience Design!
💥Experience Design “is the practice of designing products (including digital products), processes, services, events, omnichannel journeys, and environments with a focus placed on the quality of the user experience and culturally relevant solutions.”
💬What is experience design?
1. Experience design is not just digital design
The idea that design has moved from being a problem solver to a creator of meaningful experiences, especially holds true in light of the move from broadcast to dialog. That is, the shift from one directional conversations between brand and consumer (traditional advertising), towards a two directional conversation (e.g. engagement through social media).

2. Experience design includes the design of customer experience
The holistic nature of Experience Design also includes the Customer Experience (CX), which itself encompasses a breadth of factors that affect the realm of Experience Design. CX looks at the experience a customer has across every touch point of their brand.

3. Designing experiences is an iterative process
Similar to UX design, Experience Design encompasses an iterative learning process. I encountered 2 key tools for understanding how experience can be crafted: by prototyping, and through the use of an iterative process known as ‘The Learning Spiral”.
💡Conclusion: Remember, your job as a designer (whatever type of designer that may be) is not only to produce a good use experience on each isolated channel. It’s also to ensure that every experience you design is made up of components driven by Brand. With key components defined, as well as a clear framework for how those components affect different areas of experience, Brand is more likely to be consistent across channels, and aligned to the intended Brand concept and attributes.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🔸Lab 6, Group 8, YVStillHere.
🌷In this activity, we are brainstorming and devising a solution that group 8 will work on for the final project.
🎶The topic that our group will do is K-pop.
🌈Conclusion: : We don't have a reliable market for Kpop-related merchandise.
: We will create website which will acts as a hub for external shopping sites, and also trading space for to buy/sell Kpop-items.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

⚠️The 7 factors that Influence User Experience.
🔥Various factors influence user experience on different platforms such as web and mobile app. Below we have mentioned seven of those factors. These seven factors describe the affective experience of any product. The designer can analyze their designs with the help of these factors. So the seven factors of UX are
💡Useful - UX require a product should be useful, a product is not useful if it is funny and aesthetic. A product is called useful when it has benefits for users such as accomplished a goal and able for practical purposes. So we can say the useful product is that who allows users to accomplish a task or objective.
💻Usable - The second factor a UX design requires that is “Usable”. A product is called usable when users able to achieve their end objectives effectively and efficiently. So as a UX designer you have to allow users to achieve the maximum with minimum effort.
🔍Findable - The third factor a UX design requires that is “Findable”, a product may be findable when it must be easy to find also the content within the product must be easy to find, too. To make a product findable, So a UX designer must have to categories the content. Making product findable you have to provide search bar, voice search, tabs and filter to end user in your product design.
📚Credible - Credibility factor related to the ability of the user to trust in the product that you have provided. The information provided within the product should be accurate and fit for end-user purpose. If you will make fool to end-user or provide misinformation inside the product then the user will never come back next time.
👥Desirable - Desirability factor is related to conveying of unique aesthetics, and emotional design. A user brags about the more desirable product and promotes it for you without any marketing investment.
🔸Accessible - The sixth factor is about accessibility, Its about providing an experience to the end-user which can be accessed with a full range of abilities. Therefor accessibility requires to provide experience for those who are disabled in some respect, such as the hearing, vision, motion or learning impaired. Voice search is a good example of an illiterate person, similarly its also good for those who can’t type for search. It’s also worth remembering that when you design for accessibility you have to design products that are easier for everyone to use.
⚖️Valuable - This factor requires the product must deliver value to the end-user and creator. As designers, you have to remember in mind that the value is one of the key influences on purchasing decisions.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🔔What is interaction design?
🌷Interaction design, often abbreviated as IxD, is “the practice of designing interactive digital products, environments, systems, and services.” While the digital side of this statement is true, interaction design is also useful when creating physical (non-digital) products, exploring how a user might interact with it. Common topics of interaction design include design, human–computer interaction, and software development. While interaction design has an interest in form (similar to other design fields), its main area of focus rests on behavior. Rather than analyzing how things are, interaction design synthesizes and imagines things as they could be. This element of interaction design is what clearly marks IxD as a design field as opposed to a science or engineering field.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

🦠It is the 5 lab of the 4A group on the topic of “low vaccination rates”.
💉In this activity we will brainstorm and collect questions. In order to interview with another group of friends what their opinions are. And after the interview is over, we have to write down a summary of the answers that our friends answered.
💥At the end of the activity, we came to the conclusion that most of the Thai people were not fully vaccinated. Due to many reasons, such as inadequate efficacy of the vaccine, underage, etc.

💌Group 4, the 4 lab topic is to solve the problem of low vaccination rates of Thai people.🦠💉

🌈 What is PACT Analysis?
👥 People : The people would be the stakeholders of the attendance system. There are three types of stakeholders that could be organized.
✨ Primary Stakeholders (Directly uses the system)
- Academic Staff - Lecturers
- Postgraduate Students
- Administration - Course Coordinators
✨ Secondary Stakeholders (Use occasionally or through an intermediary)
- Board of Management
✨ Tertiary Stakeholders (Affected of use)
- Board of Directors
💻 Activities : Temporal aspect, Cooperation, Complexity and Safety critical.
🏬 Context : Education, Healthcare, Financial.
🌍 Physical : Noise, light, time, in the office and on the move.
🏘 Social : Individual activity, group activity Computer-mediated social activity and social norms.
🧠 Psychological : Psychological Motivation, attitudes Cognitive demands and level of arousal.
⚙️ Technology : Web, Apps, Software, Hardware and Tools Application.
🖥 Input : Getting data in; getting commands; security.
🎥 Output : Video vs. Photographs; Speech vs. Screen.
🔕 Communication : Between people, between devices, speed.
💻 Content : What data in the system : a web site is all about content.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

💡 What is Design Thinking?
Design Thinking is design thinking. To fix the problem on the spot as well as being able to develop new ideas to fix the problem or the problem that has been set. This process-based solution is focused primarily on the user or the consumer.
💥 Which aims to create tangible results in the future in order to effectively solve the problem, including new innovations that is the most beneficial as well.
Today, I will present the design thinking process or Design Thinking through 5 steps for friends to see a clear picture. And understand more as follows:
🌟 1.Empathize
Let's start by understanding the problem. It's an extremely important first step. We need to do a complete analysis of what the problem is to find a clear direction a proper understanding of the problem leads to the right solution and effective results.
🌟 2.Define
The next step is to define the problem clearly what the problem actually is. Take all the data and analyze them to filter them into real problems. In order to be a guideline in the next step.
🌟 3.Ideate
Ideate is to brainstorm without limitations. We or our team should brainstorm in a variety of ways. In order to guide the evaluation to summarize the best idea for solving the problem by various ideas and approaches the idea that came up was to answer the problems that occurred in the process of define in the past.
🌟 4.Prototype
The prototype step is another process that we need to consider. Is to create a prototype to test and answer questions according to the guidelines we have chosen before putting it into practice.
🌟 5.Test
End with a test or a conclusive test. By bringing the model created to test it for real use with users. Or target group to see performance as well as to evaluate to bring advantages or disadvantages to improve before being developed for actual use in the future.
How are you doing with "Design Thinking"? At this point, friends are starting to understand the meaning better, right?
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.

💌 Do you know that the Wireframe is what it is? How is it important??
Today we'll be introduced to Wireframe making, which is a very important basis. For those who are looking to be a UX Designer, I can tell you that I can't know about this anymore!!
🔥 So what is that Wireframe? How are the details. Let's find the answer in this post.
📝 Wireframes are wireframes, or drawings, used for web content and functionality. Or application it's important to take into account the user's needs, and the Wireframe is an early process of design.
⭐ This should be done before designing a website. Or the real application because it will allow all parties to understand the whole picture together. Reduce errors and increase the speed of work.
📍 Here are the key things to designing a Wireframe:
💻 Aspect Ratio - The composition and aspect ratio of each page should be properly placed. Whether it is displayed on a web page or on the mobile application.
👍 Objectives - Must clearly define the purpose of each page, for example, Grap application that clearly separates the functionality of each page, namely the restaurant selection page. Menu order page and the payment page.
✨ Format - The style of the Wireframe should be clearly defined and meet the user's needs as much as possible.
👍🏻 If your friends like or like, don't forget to press like. Press share to support us too.