The following are for our next class.
1. Buy:
Buy Designed for Use by Lukas Mathis
2. Reading and Discussion Question:
Please read The Unbearable Homogeneity of Design and post 1 discussion question in the slack channel for Reading 1.
3. Sign up for InVision
InVision is online, browser-based prototyping application that allows us to make simple functioning web prototypes out of static images we generate from Sketch or Photoshop. As a class, we get a free InVision account.
If you don’t have an account yet, please sign up here with your school email address (It will only take a few seconds): http://www.invisionapp.com/education-signup . For this sign-up, you’ll need a verification code, which I will email you separately.
If you already have an account, email our InVision education rep Nadav (nadav@invisionapp.com) from your newschool email address. Mention that you need an upgrade as part of my class, and tell him your expected graduation date.
4. Read through Lessons 1–4 of Learn to Code HTML & CSS
Shay Howe provides a really nice overview of HTML and CSS. Especially if you have not had HTML and CSS yet, please read through Lessons 1–4
5. Review HTML and CSS basics Demo Code
I introduced these files to you in the first class, but it is good to review them on your own in more detail. They include explanatory text in the form of comments in the code. Download the Zip document, unzip it, and review the following files by opening them in Sublime Text:
- structure_full.html
- text.html
- links.html
- img.html
6. Create a personal Homepage
Your homepage will serve as an organized place to post and access your web exercises and projects. Create an organized folder structure which includes the main page, an index.html page. To create theindex.html page, duplicate the html.html template document I shared on Slack and rename it. Then add some simple content: your name, a small blurb about yourself, and links to the anticipated projects. Finally, add some simple styling (colors and fonts). If you are able to make more complex css styles, go for it. See below for examples of my own homepage and the associated folder structure:
7. Upload your homepage to the B Server
- Parsons provides student hosting space, called the B Server. You’ll receive instructions to log in from an email later this week. The subject line will read “Root”. You might have to check your SPAM folders, but be on the look out for that email, which looks like this:
- Use an FTP Client such as Cyberduck or FileZilla, as well as the log-in information provided in the email, to make a connection to your server space.
- Simply drag your files from your local machine into the FTP client window (specifically the
public_html folder), and you should see a transfer or upload of files happen.
- Go to your B Server site. In my case it is http://b.parsons.edu/~doshio/, but you will replace the last part with your own user name or whatever has been indicated in the credentials email you received.
8. Continue to Style your Wikipedia Page
Continue with Part 2 of the Wikipedia mini project. You will work more on it during class, but get as far as you can.
One thing that struck me in this reading was at the very beginning, where the primary themes are defined. Referring back to the article last week about the homogeneity of design, the guidelines for the primary themes seemed slightly facist to me – in order for an app to reach the top of the charts, it must have the same aesthetic that apple has. Perhaps companies like apple who have such a strongly defined aesthetic are perpetuating the standards in the design industry. “well-known icons, standard text styles, and uniform terminology”: how can that result in creative evolution? However, I also understand that apple has to serve a wide range of consumers, including older generations who benefit from such a simple and minimalist interface.
Another thing that surprised me was the amount of elements that go into apps. I never knew the extent of concepts on what an app should/shouldn’t do in order to keep the user engaged, focused, and using the app. For example, I had never heard of the concept of ‘modality’, or it had never occurred to me that people had thought through that when an app is loading some kind of indication should be shown to the user.
“When content is loading, a blank or static screen can make it seem like your app is frozen, resulting in confusion and frustration, and potentially causing people to leave your app.”
I guess I was just surprised by the amount of business thinking that goes into designing the app and making sure users stay on your app. It never occurred to me that designing apps is such a complex/psychological activity because i’ve always been on the user end.
I found the section on Haptic Feedback to be valuable. While I was aware of feedback, such as vibration when the user engages — I wasn’t aware of what it was called, or how to use it precisely to create the most fluid and understanding user experience.
In video games, we deal with feedback all the time. Vibrate the controller when hit, make items flash a certain color to let the player know they’ve engaged. Play certain musical prompts to train the user in knowing when a certain event is happening.
The important moments for me, as a refresher in haptics are to never overuse them as it could create an unpleasant or numbing experience for the user. Also, their handiness when certain information is being obstructed. (The dragging item example.)
When it comes to the game design aspects of my study, haptics plays a significant role in polishing up the user experience. The trickiest part it seems is figuring out how to deal with latency. Haptics strikes me not only as a tool for added understanding between user and device but also as a means to make rigid technology seem more organic, vibrant and closer to something we’d engage with naturally.
Reading about Apple’s iMessage app and its design decisions, I appreciate how Apple is taking into consideration a lot of different factors into making the user experience more enjoyable and compelling for all audiences. Their choices are deliberate and thoughtful — size in relation to content, simplicity in relation to focus, format in relation to clarity.
Trying to make it more than just a simple exchange of messages between people, Apple has incorporated various features such as animations and stickers. They are pushing for a more meaningful, visual experience with words. Through added features, people have the ability to converse with more emotion; they can further understand what the other person is trying to say as well. For example, I think it is extremely easy to misunderstand a message, dismissing it as rude when it was not meant to come off that way — by further sending expressive additions, the true intention of that message can be interpreted.
I think that as our society is becoming more technologically dependent, Apple is a greatly influencing how humans interact over the phone. Reflecting on how we use messaging today compared to messaging when we were still using flip phones, we have come a long way in the ways we connect and reach out to one another. Through new innovations and fresh approaches, Apple allows for a substantial, but fun experience. I think that Apple ultimately pushes us to explore active and engrossing conversation overall.
As a game designer, the aspect that called to my attention the most was the user interaction. This is something that really quickly either make a product/app/game, or break it. User Interactivity is, as importantly in games, the connection between the player and the mechanics. The way a user interacts with a game can, even more so, add to the narrative of the experience.
Furthermore, seeing a more in-depth description of 3D Touch really piqued my interest. There aren’t many mobile games out there that take advantage of the additional dimension. It makes me wonder how it could be incorporated into a game vs how Apple normally uses it for accessing additional functionality.
As can be noted, large companies definitely do remain on the top through their consideration for the user’s enjoyability and usability. Although varying new innovations are made, users come back and always vouch for technology with a clean feel. They like to be able to make any expressions without overwhelming amounts of alterations through the simplification of mediums in technology. This ties into the importance on how the user experience revolves around stability and smooth, interesting interactivity. Those two aspects combined create a compelling development in technology that users love.
By reading Google’s Material Design, I had a detailed understanding of how motion movements were defined in Google’s applications. Being smooth, efficient and noticeable were essential characteristics. The layout system(grids) was unified, clear and organized. The layout of components were clearly defined on grids. The front page should be friendly and welcoming.
Having thought about optimizing responsive and playful nature of motion in the past, I was drawn to reading about it instantly. What I find fascinating is how tech companies behind our phones have managed to create a language through logos, lines and animated feedback that we all comprehend without difficulty. One of the reasons for why it feels so natural to us is because motion is inspired by real life. There’s a sense of gravity and pace that creates a cohesive experience. Whether the subject be playful or serious and straightforward; motion acts as a guide through a 2-D world that was designed with a balance of simplicity and complexity in mind.
As a game designer, I know the user psychology too well. We tend to make up our minds about a product in the first half a minute of interacting with it. If such product doesn’t embody a sense of intentional and unique motion, it’s very common for a user to move on without even experiencing the true purpose of the app. This reading has inspired me to value how motion can deeply affect a user’s interaction.
After reading about Google’s Material Design, it struck me as highly intriguing that for a digital medium, that Google’s Material Design draws inspiration from the tactile nature of our reality. That it is inspired by the study of paper and ink.
Also brought to my attention was how “motion provides meaning”, a motion is something inextricably related to our daily realities, and witnessing or interacting with it even in an abstract medium like digital user interfaces for phones. Hence, as motion is predominantly present in some shape or form in all our physical interactions, featuring some semblance of motion is key to provide a positive feedback and all in all a cohesive experience.
That being said, user experience design is still participatory design. So in summarization, the material design guidelines have taught me that in order to build an effective design for our users, and considering the fact that different users use the same differently, we need to build a design which accommodates the various nuances of various users.
Apples human interface guidelines is composed of a strict set of principles that their applications abide by. One of the most interesting elements I found was that they draw inspiration from real life to develop their productions. It says that they mimic actual page turning, when looking at a book on an iPhone. This is one way to easy in consumers into a product and a lifestyle.
I found these guidelines more of a branding technique than anything else. Apple strives to make their products easy for all ages and type of people to use. Their icons are used globally for quick recognition of operations. They can be readable when they are really tiny as well as when you enlarge them. Apple goes very in-depth in even their most basic functions. When an apple product sticks to these rules then it helps unifies their company, making it have a stronger brand that is more easily identified.