Decrease line height as font sizr increases

Line height is relative to font size. The larger the font size, the smaller the line height should be, to
maintain comfortable spacing

Ensure ideal line length

To improve readability, ensure text is 40-80 characters per line (including spaces). A comfortable line
length is especially important for long body text

Don’t centre align long body text

Don’t justify long body text

The variations in letter and word spacing make it harder for your eyes to distinguish text and follow line

The variations in spacing also create distracting “rivers” of white space, highlighted in the following
example

Giảm letter spacing for large text

Vì một số typefaces được thiết kế cho việc đọc ở sizes nhỏ, long body text nên khoảng cách giữa các con
chữ cần phải đảm bảo tính dễ đọc. Nên với những typefaces như vậy khi sử dụng cho large text cần giảm
letter spacing xuống để trông thiết kế tốt hơn

CHAP 6: COPYWRITNG

Be concise

As people often wont read large chunks of text. Our attention spans are shorter than ever, so aim to say
more, with fewer words.

Being concise makes your content faster and easier to understand

Some guildlines in how to concise:

* Tránh các từ: actually, basically, really, truthfully, quite

* Tránh các từ short joining words: a, an, the

* Không dùng các mẫu câu: would you like to, in order to, when it comes to, are you sure, there are, it is

* Dùng các cụm ngắn thay vì dài nếu chúng đều mang chung 1 ý nghĩa

* Try to keep sentences under 20 words

Use sentences case

Sentence case: “This is sentence case” >< Title Case: “This Is Title Case”

Our minds are expecting a lower case letter, so an uppercase letter confuses us. This unnecessarily
increases cognitive load.

Use plain and simple language

Keep your language simple and conversational to make it easier for a broader range of people to
understand.

* Imagine that you’re having a conversation with a 6th grade student who’s unfamiliar with the topic

* Avoid jargon (đặc biệt hoặc từ chuyên ngành mà chỉ được hiểu bởi một nhóm đối tượng cụ thể)

* Avoid slang (very informal language used between people in the same social group)

* Choose short, simple words over long and complex ones

* Use shortened words to sound more natural: who’s, they’re, you’re

Front-load text

Front-loading is putting the important information at the start of your text. Putting the key information
or benefit at the front of your headings, lists, and links makes it faster and easier for people to get value
from your text

Use the inverted pyramid

The inverted pyramid is a writing structure where the most important information is placed at the start,
followed by supporting information and smaller background details.

- It gets to the point quickly, helping people understand information and make decisions faster

- People who quickly skim the first sentence will still get the main point

- Additional information is there for those who need it

* most important information is contained in the heading to allow most to complete the task without
reading any other information

* supporting information is displayed under the heading for those wwho need a bit more detail

* smaller background details are moved to a separate screen as they’re less important and could add
unnecessary complexity

Không nên dùng từ viết tắt, rút gọn

VD: “department” -> “dept.”

“COB” -> “close of business”

“The ETA of the dept. manager is COB tomorrow” -> “The ETA (estimated time of arrival) of the dept.
manager is COB (close of business) tomorrow”

Limit the use of UPPERCASE

Nếu như viết ở dạng UPPERCASE, chữ sẽ rất khó đọc, cảm giác như đang quát vào mặt người dùng.
Người dùng sẽ chỉ nhìn vào shape của con chữ , ít khi nhìn kĩ từng chữ một, Shape của các từ type dưới
dạng UPPERCASE

Có thể dùng uppercase cho những từ ngắn để khiến cho visually được phân cấp dễ dàng hơn.

Use uppercase in bold weight at a small size and increase the letter spacing

Break up content using descriptive headings and bullets

Break up large pieces of information into multiple smaller ones

Make sure heading are descriptive

Title nên miêu tả được nội dung của mục đó là gì. Đôi khi người dùng chỉ đọc title, không đọc nội dung
bên trong

Avoid using “my” on form labels

Use vocabulary consistently

Use the same word consistently to describe the same interface element

Một vài trường hợp hay bị trộn lẫn, không đồng nhất:

* Publish vs post

* sign up vs register

* log in vs sign in

* delete vs remove

* subcribe vs join

Không type dấu chấm cuối câu nếu có thể

Ensure text length is similar across similar interface elements

Ensure text links describle their destination

Text links need to describe where they’ll take you when actioned. It’s more difficult to scan a page with
links that arent descriptive, as you’re forced to read the surrounding text to gain context
Try to use radio button instead of dropdowns

Use an autocomplete instead of a long dropdown

Use steppers for numeric fields instead of dropdowns

Ex: the interaction cost using dropdowns is 6 click plus 3 scrolls. Whereas, steppers is only 4 clicks

Use positive phrasing for checkboxes

Describe what will happen when he checkbox is selected, rather than what wont happen

Break up long forms into multiple steps:

* Let people know how long the form will take to complete and what they’ll need before they start

* Order questions from easier to hardest so people achieve early win

* Indicate progress as people fill out the form

Starting from Scratch

Start with a feature, not a layout

“Design the app” và những suy nghĩ đầu tiên sẽ:

 Sai: suy nghĩ về layout liệu có cần top nav, sidebar, items ở bên trái hay phải,...?
 Đúng: “app” chính là tổng hợp của các chức năng. Trước khi design, sẽ chẳng có thông tin nào để
có thể đưa ra quyết định về việc nav bar được thiết kế như thế nào. Nên tập trung vào chức
năng thật sự của app

VD: building a flight booking service. Could start with a feature like “searching for a flight”

Your interface bao gồm:

  A field for the departure city
 A field for the destination city
 A field for the return date
 A field for the departure date
 A button to perfom the search

Detail comes later:

Don’t get hung up making low-level decisions about things like typefaces, shadows, icons, etc.

Hold the color:

 Even when you’re ready to refine an idea in higher fidelity, resist the temptation to introduce
color right away.
 By designing in grayscale, you’re forced to use spacing, contrast, and size to do all of the heavy
lifting.

Don’t design too much

 Figuring out how every feature in a product should interact and how every edge case should look
is really hard.
 VD: How should this screen look if the user has 2000 contacts?

Be a pessimist:

 Don’t imply functionallity in your designs that you arent ready to build
  When you’re designing a new feature, expect it to be hard to build
 If part of feature is a “nice-to-have”, design it later.

Choose a personality

Design cần chú trọng vào concept riêng biệt của từng domain

Font choice:

Color

Border radius: Whatever you choose, it’s important to stay consistent.

Language: Words are everywhere in a user interface, and choosing the right ones is just as important
than choosing the right color or typeface.

Limit your choices

Những thứ không đáng để lựa chọn giữa chúng, chọn cái nào cũng mang đến giá trị như nhau, thì nên
cân nhắc nhanh chóng.

Define systems in advance

 Color: Start with a smaller set of options

Choose from a set of 8-10 shades picked out ahead of time

 Font: Define a restrictive type scale in advance and use that to make any future font size
decisions
=> You only have to do the hard work of picking the initial values once instead of every time you’re
designing a new pieace of UI.