Wednesday, August 15, 2018

Human-Centered Design

Sometimes we get so caught up in the aesthetic of it all that we forget first and foremost that people are using our products. I recently finished reading Don Norman’s incredible classic The Design of Everyday Things. It was first published in 1995, and he revised and expanded it in 2013, which is the version I read.
From https://www.goodreads.com/book/show/840.The_Design_of_Everyday_Things

I learned about core concepts of design such as affordances, signifiers, and natural mapping. At the same time, I gained so much from it about life in general. At work, if I find myself laying the blame of failures to the errors of others, I remembered Norman's lesson that a so-called human error is really a design error. I am learning to empathize. I learned to not accept the norm caused by bad design and to always think of ways to improve.


I think that society often wants to find a person to blame. That kind of mindset stems from the fact that we believe we can change, or we can actually read the instruction manual, whereas the technology is there to sit. However, I think we could switch that mindset.


Have you ever heard the adage that you can’t change other people? You can only change yourself.


Maybe that is true. However, try this: change the design.


See, throughout all of history, humans have not changed. Meanwhile, technology has changed a lot. So everytime we push a door instead of pulling it, throw up our hands in frustration at a confusing faucet, or simply avoid that new stand mixer because there are too many scary widgets on it, why do we force ourselves to change? The design of technology can change.


As Norman puts it, “when people err, change the system so that type of error will be reduced or eliminated.”


Here are some more quotes from the book that resounded with me:

After all, why do we make products? We make them for people to use.
The unaided mind is surprisingly limited. It is things that make us smart. Take advantage of them.
The same technology that simplifies life by providing more functions in each device also complicates life by making the device harder to learn, harder to use. This is the paradox of technology and the challenge for the designer.
Yes, technologies may change, but people stay the same.
Technology changes rapidly, but people and culture change slowly. Change is, therefore, simultaneously rapid and slow. It can take months to go from invention to product, but then decades— sometimes many decades—for the product to get accepted.
the heavy momentum of legacy inhibits change.
One way of overcoming the fear of the new is to make it look like the old.
The principle of desperation: If all else fails, standardize.
Hindsight is always superior to foresight.
So I resorted to the most powerful tool employed by experts the world around—I banged on the cabinet. And yes, it opened.
For anyone who is considering growing old
Sometimes, bad products succeed and good products fail. The world is complex.
It is not a threat to professional competence to be human.
The design projects all the information needed to create a good conceptual model of the system, leading to understanding and a feeling of control.


And finally, praise, bless, and amen to Norman’s section on Things that make us smart:
Couple the use of full-body motion and gestures with high-quality auditory and visual displays that can be superimposed over the sounds and sights of the world to amplify them, to explain and annotate them, and we give to people power that exceeds anything ever known before. What do the limits of human memory mean when a machine can remind us of all that has happened before, at precisely the exact time the information is needed? One argument is that technology makes us smart: we remember far more than ever before and our cognitive abilities are much enhanced.
Another argument is that technology makes us stupid. Sure, we look smart with the technology, but take it away and we are worse off than before it existed. We have become dependent upon our technologies to navigate the world, to hold intelligent conversation, to write intelligently, and to remember.
Once technology can do our arithmetic, can remember for us, and can tell us how to behave, then we have no need to learn these things. But the instant the technology goes away, we are left helpless, unable to do any basic functions. We are now so dependent upon technology that when we are deprived, we suffer. We are unable to make our own clothes from plants and animal skins, unable to grow and harvest crops or catch animals. Without technology, we would starve or freeze to death. Without cognitive technologies, will we fall into an equivalent state of ignorance?
These fears have long been with us. In ancient Greece, Plato tells us that Socrates complained about the impact of books, arguing that reliance on written material would diminish not only memory but the very need to think, to debate, to learn through discussion. After all, said Socrates, when a person tells you something, you can question the statement, discuss and debate it, thereby enhancing the material and the understanding. With a book, well, what can you do? You can’t argue back.
But over the years, the human brain has remained much the same. Human intelligence has certainly not diminished. True, we no longer learn how to memorize vast amounts of material. We no longer need to be completely proficient at arithmetic, for calculators—present as dedicated devices or on almost every computer or phone—take care of that task for us. But does that make us stupid? Does the fact that I can no longer remember my own phone number indicate my growing feebleness? No, on the contrary, it unleashes the mind from the petty tyranny of tending to the trivial and allows it to concentrate on the important and the critical.
Reliance on technology is a benefit to humanity. With technology, the brain gets neither better nor worse. Instead, it is the task that changes. Human plus machine is more powerful than either human or machine alone.
Society always fears new technology, whether it be the book, the printing press, the cellphone, the Internet, machine learning, or GMOs. I say, dive right in. I trust humanity to move forward with technology and maintain moral and intellectual standards.

Saturday, August 4, 2018

Personal Websites: examples and what I love about them

Hi everyone! I thought I would finish this blog, so I’m back!


When I was revamping my personal website, I stumbled upon several examples as inspiration. Here is what I love about them:



http://seanhalpin.io

Scrolling through his website gives me such peace. It’s simple. As a web designer, he understands. The typography and content convey his message, and the drawings infuse a personality that is welcoming, cute and lowkey.


A good website has a tagline. Sean Halpin’s is refreshingly short and tells me that he is an expert at this stuff.




This is my favorite out of all of these examples. The website easy and the personality is to swoon for. Did I mention the ease? Denise Chandler has managed to a fit a lot of content on there, now that I am analyzing this, but it doesn’t feel like it! I just want to tell her, we are on the same wavelength.


Do you see this dialog? It is beautiful! Do you see that close button? That pretty white x on an orange button that is 2D, not exactly a rectangle, not exactly a circle, but inlayed into the bottom right corner of the dialog.




I love his use of white space. It gives me such peace.


Many websites list an email address and perhaps a hyperlink that opens up an email message. For me, the latter is not preferable because I don’t like using the default Mail app. Matt Farley’s contact method opens up a form where people can directly contact him. Forms bookend his page, a call to action.




Yaaaaaaaaas.  Pascal van Germert has his entire website/interactive resume in one page. The navigation is a vertical sidebar which reflects great spatial navigation (checkout Don Norman’s explanation on this). Also, I love how there are quotes dispersed throughout. I’m wondering, what is “.nl?” I haven’t heard of that URL before.




Neat. Really cool. A simple tagline can be found on the navigation bar, and then his home page dives into a nice list of his blog posts. I like how it’s clean and only shows the title and date. I mean, I get how revealing a bit of the text of the blog post can help direct traffic, but I like how this website lists out all the blog posts in an easy-to-scan manner.




Adorable! I’m squealing it’s so cute. Diana Chiu’s website reflects her passion for “building, in both virtual and real spaces. I love to create things, especially things that are super-extra-over-the-top-adorable, or at least make people happy.” Yes, yes, I am very happy.




I like how Cassidy William’s website reflects a software developer’s tools. The background is dark gray and the text is light gray with mustard yellow URLs. The font matches that of a nice looking monoic typography. The [+] text is clickable and reveals a detail.


Her change log is so cool. It mimics a version control list of changes, and it’s actually a list of updates in her life.

That wraps up the examples!

Saturday, February 22, 2014

Turning a Boring Article into an Elegant Webpage!

Today, I found an article from World Book Online about Yuna Kim and took its content to design a web page!

The article I found:




This is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Kim Yu-Na</title>
    <style type="text/css">
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: papayawhip;
            margin: 0;
        }
        header, #body, footer {
            margin: 0;
            padding: 5px 50px;
        }
        header {
            background-color: peachpuff;
            text-align: center;
        }
        h1 {
            color: lightseagreen;
            margin-bottom: 0;
        }
        h2 {
            color: DarkKhaki;
            font-style: italic;
            font-size: 1.25em;
            margin-top: 0;
        }
        #body {
            background-color: bisque;
            color: midnightblue;
            width: absolute;
            height: absolute;
        }
        img {
            float: left;
            margin: 10px;
            width: 11%;
            height: 11%;
            border: 1px solid white;
        }
        footer {
            background-color: inherit;
            text-align: right;
            color: darkcyan;
        }
        a {
            color: inherit;
        }
    </style>
</head>
<body>
<header>
    <h1>Kim Yu-Na</h1>
    <h2>Figure skater<h2>
</header>
<div id="body">
<p><img src="http://olympicgirls.net/sport-girls/kim-yu-na-figure-skating-07.jpg" alt="Kim Yu-Na Skating" caption="From http://olympicgirls.net/kim-yu-na/kim-yu-na-figure-skating-07/" />Kim Yu-Na (1990-...) is a champion South Korean figure skater. She won the gold medal in women's figure skating at the 2010 Winter Olympic Games in Vancouver, Canada. The judges awarded her 228.56 points, a new world record. She had set the previous world record in 2009. Many observers described her performance as one of the greatest in Olympic figure-skating history. Kim became the first South Korean to win a medal at a Winter Olympics in a sport other than speed skating. Kim's success in international figure skating has made her a national hero in South Korea.</p>
<p>Kim Yu-Na was born on Sept. 5, 1990, in Bucheon, South Korea. She began skating at the age of 5. She won the South Korean Ladies Figure Skating title at the age of 12. She repeated as champion the next three years. In 2006, Kim moved to Toronto, Canada, to train under Brian Orser, a retired Canadian figure skater. Kim won the World Junior Figure Skating Championships in 2006 and the World Figure Skating title in 2009.</p>
</div>
<footer>
    <p><cite>Courtesy of <a href="http://worldbookonline.com/" target="_blank">World Book Online</a></cite></p>
</footer>
</body>
</html>



And here's my final webpage!



I'm still working on developing my artistic taste for color schemes because you can see that the colors for the headings 1 and 2 don't really match with the background...

But these are some websites that really helped me with colors:

http://www.colors.commutercreative.com/



This is an elegant and simple website that shows all the colors and gives you the names... I really like its modern look!


http://colorschemedesigner.com/


On this website you choose a color from the wheel and the website suggests color schemes and gives you the hexidecimal values.


Thursday, February 20, 2014

Run a Non-Default Browser in Metro: Windows 8

Today I started working on the 4th edition! No, I did not finish the 3rd edition. I mean, if I finished the whole thing I'd be really bored with this new edition since everything is pretty much the same except HTML5, the new CSS, and a section on understanding Javascript.

Did you know that Javascript actually has nothing to do with Java? The creators originally named it "LiveScript," but Java was really popular then, so the creator renamed it Javascript, or "JS" for marketing purposes.

I need to share something that really frustrates me about Microsoft. So you know the new Windows 8? Well, they have apps that can operate in metro, meaning in the tablet way, imitating the Apple ipad, etc. etc.

Okay. I'm not too cool with the metro thing. But since I have it anyways, why not use it? Okay, so I want to use IE 10 (the newest version of Internet Explorer) in metro. But Microsoft only allows you to use IE 10 in metro if it is set as your default browser! Why?

This is their ridiculous reason:

"Metro style enabled desktop browser may participate in the Metro style user experience only if it is the default browser... The restriction to limit Metro style user experience participation to the user's default browser is rooted in preserving the Metro style user experience."

Source: http://superuser.com/questions/490415/is-it-possible-to-use-the-ie10-app-without-making-internet-explorer-the-default

I don't want to set IE as my default browser because then every time I run my html files, they run with IE:
From the source up there, I learned a way to get around Microsoft's ridiculous rules!

You go to Default Programs (search from start) > Set your default programs. Choose IE, and set it as your default browser:

Then, on the left hand side, click on the browser you want as your default, the one you want to open html files with. For me, it's Google Chrome. Click choose defaults for this program.

The extensions part should look like this:


Make it look like this by checking everything in extensions:

Now go back to your files and they'll open with Google Chrome!


And IE runs in metro:


Take that, Microsoft!


Thursday, February 13, 2014

Colors and Backgrounds

Today I used what I learned about specifying colors in CSS in order to make a black and white webpage about Cabbages and Cauliflowers much more exciting. Here's what it started like, with CSS rules on only the text style:



Then I added color to the text, background color, and background images. This is the new style sheet:

<style type="text/css">

  body{margin-left: 10%;
    margin-right: 10%;
    background-color: #BBE09F;
    background-image: url(cabbage_C.gif);
    background-repeat: no-repeat;
    background-position: center 85px;
    background-attachment: fixed;
  }
   
  div#titlepage {
    padding: 1em;
    background-color: #D4F8B9;
    background-image: url(cabbage_C.gif);
    background-repeat: no-repeat;
    background-position: center 85px;
    background-attachment: fixed;
  }
  
  div#titlepage p {
    text-align: center;
    font-variant: small-caps;
    }
   
  p {
    text-align: justify;
    }
 
  h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
    text-align: center;
    }
    h1 {
        color: #C30;
    }
    h2 {
        color: #630;
    }
    a:link {color:#030;}
    a:visited {color:#363;}
    a:hover {text-decoration:none;
    color:#030;
    background-color:#87B862;
    }
    a:active{color:#C30;}

    </style>

This is what it looks like now!


Tuesday, February 11, 2014

More on Colors!

As promised yesterday, we'll look at

#FFFFFF

and

#FFF

today.

So, #FFFFFF is written in hexidecimal. The first two Fs are for red, the next two Fs for green, and the last two FFs are for blue. Basically, if each of the digist (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) for red are the same, you can simplify it to one digit. Same for green and blue. So in our example, that simplifies to #FFF.

It isn't very intuitive to come up with hexidecimal for a color on the spot, so here's a handy dandy colorful table for you:

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

Source: http://www.w3schools.com/cssref/css_colors.asp.