DEV Community: AbdulrahmanEmad

Goodsummaries ( a new site)

AbdulrahmanEmad — Mon, 18 Oct 2021 06:28:38 +0000

Say hello to my new site and can be considered my first full site.
It's a site for publishing and sharing summaries of books
You can check and use it here:
https://goodsummaries.herokuapp.com/

used technologies:
HTML, CSS, SASS, JAVASCRIPT, NODEJS, EXPRESS

"Don't Make Me Think" Summary for UI/UX designers [Fifth Chapter]

AbdulrahmanEmad — Thu, 04 Mar 2021 12:55:54 +0000

Get rid of half the words on each page, then get rid of half of what’s left

in this time, I'm gonna summarize the part of "getting rid of extra and unnecessary words in sites"

1-Omit needless words:
get rid of words that nobody is going to read to:
1-Reduce the noise of the page
2-Make the useful content more prominent
3-Make the pages shorter, allowing users to see more of each page at a glance without scrolling

2-Happy talk must die: It’s the introductory text that’s *supposed to welcome us to the site and tell us how great it is or to tell us what we’re about to see in the section we’ve just entered.

3-Instructions must die: Your objective should always be to eliminate instructions entirely by making everything self-explanatory. When instructions are absolutely necessary, cut them back to the bare minimum

Example:
Before Editing:

After removing [and how much should you remove]:

"Don't Make Me Think" Summary for UI/UX designers [Fourth Chapter]

AbdulrahmanEmad — Tue, 09 Feb 2021 11:47:08 +0000

Today, I'm going to summarize the fourth chapter. It's an easy and small one, so let's dive into it

Chapter 4: Animal, Vegetable, or Mineral?

"It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice"

[KRUG’S SECOND LAW OF USABILITY]

How many times can users click without getting frustrated?
Krug's opinion is: that users don’t mind a lot of clicks as long as:

Each click is painless: "Doesn't need a lot of thinking or efforts"
And they have continued confidence that they're on the right track. they're on the right way to achieve their goals

If you have to confront your users with difficult choices, there should be guidance too

Guidance should be:

1. Brief: the small amount of information that will help the user
2. Timely: placed so a user can encounter it exactly when he needs it
3. Unavoidable: Formatted in a way that a user will notice it

An example from real life mentioned in the book:
"street corners throughout London"

It’s brief: “LOOK RIGHT” and an arrow pointing right
timely: you see it at the instant you need to be reminded
unavoidable: you almost always glance down when you’re stepping off a curb

"Don't Make Me Think" Summary for UI/UX designers [Third Chapter]

AbdulrahmanEmad — Mon, 08 Feb 2021 13:21:41 +0000

Hello everyone. Today I'm gonna speak about the third chapter. This chapter contains a lot of information, so let's immediately dive into it.

Chapter number 3: Billboard design 101 [Design for scanning, not reading]

1. Take advantage of conventions:

conventions like the logo identifying in the top-left corner, the search icon

Notice: We can break conventions when it is:
1. so clear and self-explanatory that there is no learning curve
2. or adds as much value that’s it’s worth a small learning curve

2. Create effectively visual hierarchy:

-
1. The more important something is, the more prominent it is

2. Things that are related logically are related visually

3. Things are "nested" visually to show what's part of what

3. Break pages up into clearly defined areas

4. Make it obvious what's clickable

5. Eliminate distractions:

Shouting: everything on the page is clamoring for your attention. resist your desire to make a lot of things necessary to be noticed
Disorganization: use grids and organize everything
clutter: a lot and a lot of things on the page: When you’re editing your Web

6. Format content to support scanning:

Use plenty headlines
Keep paragraphs short
Use bulleted lists: Just look at your paragraphs for any series of items separated by commas or semicolons and you’ll find likely candidates
Highlight key terms: Don’t highlight too many things, though, or the technique will lose its effectiveness. just the most important things

"Don't Make Me Think" Summary for UI/UX designers [Second Chapter]

AbdulrahmanEmad — Sun, 07 Feb 2021 13:12:16 +0000

In this article, I'll summarize the second chapter in the book, so if you haven't already read the first one, go and read the first one from my first article in the same series.

Chapter number 2:How We Really Use The web:

"glance at each new page, scan some of the text and click on the first link that catches their interest or vaguely resembles the thing they’re looking for" (that's how we really use sites)

Three facts:

We don't read pages, we scan them: "We just scroll fast along the page searching for words or phrases that catch our eyes. What we see depends on what we have in mind [tasks at hand, or current or ongoing personal interests] and of course the trigger words like "free", "sale", "sex" and our own name"
We don't make optimal choices. We satisfice: we choose the first reasonable choice
We don't figure out how things work. We muddle through: most people don’t know and don’t care how something works as long as they know how to deal with it

Great! that's the end of the second rule of the book. Wait for the third and which has numerous useful tips and information

"Don't Make Me Think" Summary for UI/UX designers [First Chapter]

AbdulrahmanEmad — Sun, 07 Feb 2021 08:25:59 +0000

Hi there! I'm gonna write articles in which I explain the rules inside "Don't make me think" book as you saw from the title of this article.

Some stuff to know before starting:

In each one, I'll summarize a chapter, until I finish all of them.
After each point, I'm going to put an image from the book as an example [if exists]
and finally, my English is not very good, so I'm sorry for any mistakes

Chapter number 1: Don't make me think [Krug’s First Law of Usability]

The first ultimate principle is to make your website self-evident so that everyone can use it efficiently and easily even this one who barely knows how to use the back button.

Good One:

Bad One:

Get rid of question marks: All kinds of things on a Web page can make us stop and think unnecessarily:
- Be careful when naming things: one of the things that make people confused and annoyed when they use anything, not just sites is to face ambiguous names
- Clickable things: User should never devote a millisecond trying to figure out whether a thing is clickable or not, so make it effortless to realize it. for instance, you can color all of the clickable stuff in the same color, or you can make all of them in the same shape, and so on

"They enjoy puzzles in their place—
when they want to be entertained or diverted or challenged—but not when they’re trying to find out what time their dry cleaner closes" :)

Great! that's the end of it. Hope you like it and get even a little benefit. See you next article:)