Search form

UI Evolutions [intro to user interface]

[Project Narrative] [Instructional Narrative]

Project Narrative

Interface is the point at which a person and a system interacts. This project introduces user interface as a foundational consideration in new media art and design practices. A user interface is the means by which to navigate, operate, and control computers, devices, software, apps, and browsers. User interfaces are created by engineers, programmers, designers, and artists. User interface experience has evolved dramatically over time and continues to evolve. Students should explore command-line user interface [CUI], study contemporary graphical user interface [GUI], and consider natural user interfaces [NUI] as well as experimental forms and speculative futures. UI Evolutions [intro to user interface] exercises can be used as a basic introduction or be used to initiate/spark longer more involved user interface studio [or research] projects. 



starting points

How do you currently navigate, operate, and control the computers, devices, software, apps, and browsers in your life? What is involved? Text? Graphics? Something else? How would you describe the experience? How would you improve the experience? Are there missing features and functions? Are there too many features and functions? What else [who else] should be considered? User interface sensibilities and user interface design skills are immensely useful and transferrable for artists and designers making any type of interactive work.


intentions


These exercises can be used as a basic [literacy] introduction to user interface or be used to initiate longer more involved user interface design projects [incorporating graphic design, interactive design, or speculative research mockups]. 


vocabulary


accessibility, conventions, icons, ergonomics, hotkeys/keyboard-commands/shortcuts, human computer interaction, human factors, menus, obsolescence [and planned obsolescence], operating systems, responsive-design, skeuomorph, user-centered design, user experience design [UX], user interface, user interface design [UI], user testing, usability


structure and timing


part 01: Command-line user interface [CLI] exercises can be structured as a large group activity. Go slow. Individuals should follow along. The goal is experience, not mastery. Once learners begin to feel comfortable with these commands they can pursue further resources [and more advanced use of commands], and/or integrate these tools into more sophisticated scenarios. [note: this material is written for Mac users but can be adapted for other operating systems, typically Command Prompt or Powershell in Windows] Some learners will find the command-line intimidating. Some learners will find the command-line liberating. [note: something to be aware of, some learners may have no experience with directory structures or file extensions at all]. 


part 02: Graphical user interface [GUI] exercises should follow screening(s) and discussion. The goal is GUI literacy. Longer form research or studio projects can be structured for individuals or groups. Students will need time to work on and refine visuals. Goals: observation skills, comparative analysis, visual design. Concepts introduced can be intergated into more sophisticated project scenarios [depending on student skills and class/workshop goals].


part 03: Natural user interface [NUI] exercises should follow screening(s) and discussion. The goal is speculative design [what is next? post-graphic? after-hardware?]. Longer form projects can be structured for individuals or groups. Students will need time to plan, propose, experiment, mockup/wireframe/prototype, test, iterate, and refine projects.


Instructional Narrative

part 01: Command-line user interface [CLI] 


general information

Terminal is a program included with Mac OS X. When launched, it provides a command-line interface to control the underpinnings of Mac's UNIX based operating system. Terminal is located in the Utilities folder within the Applications folder.  As mentioned above some learners will find the command-line intimidating. Some learners will find the command-line liberating. [note that the default Terminal software installed in Mac is called the Bash shell, a shell is a program that accepts and interprets commands as text input and converts commands to appropriate operating system functions.]. In Terminal every keystroke matters, including spaces, special symbols, and control keys. After typing in a command, you can execute the command by pressing Return. 


exercise 1 of 1

type the commands [in bold text] into the Terminal window after the prompt$. Don't worry! You won't break anything. [*just be mindful of the rm command - this one permanently removes files forever ever]

___ 01. launch Terminal 

___ 02. pwd


pwd means "print working directory" - When you first launch the Terminal application, your working directory (the directory you're currently inside of) is your user's Home Directory (the same directory that you can access in the Finder by clicking your name in the sidebar)


___ 03. ls


ls means "list" - This command lists all files and directories in the working directory. Use ls -a to list all invisible, ls -l for long format, ls -t to order by time, or ls -alt for all the options


___ 04. cd Desktop


cd means "change directory" - This command switches you into the directory you specify. cd Desktop will get you into your Desktop. If you need to go deeper into a pathway, you can move to other directories by typing cd path/to/other/directory.


In the example here cd is a command and Desktop is an argument. note: Terminal commands can have three parts: the command [which calls a specific command-line utility], the options [which modify the command’s output, we saw these with the ls options], and the argument [which is typically the website, file, or other resource that the command will be operating on]. 


Helper! If you are lost in Terminal cd ~ will get you Home again. Home will be your user account. 


Helpers!  ~/ nameOfPlace [tilde forward slash with a directory name will get you anywhere]  ../ [dotdot slash this gets you one level out or up]  / [forward slash gets you one level in or down]


___ 05. ls


Look familar? Compare the Terminal list to your visible desktop. 


___ 06. mkDir newDogOldTricks


mkdir means "make directory" - This command creates a new directory in the current working directory. In this case oldDogNewTricks is the name of the directory being made. A directory can be named anything. Look at your visible desktop. See the new directory? Note that you can create multiple directories with space-separated names. e.g. mkDir newDogOldTricks oldDogNewTricks 


___ 07. pwd 


We should still be in the Desktop. if you are lost! type cd ~, pwd, cd Desktop, pwd, which should be Desktop


___ 08. cd newDogOldTricks


cd means "change directory" - we want to go inside newDogOldTricks


___ 09. touch commands.txt


touch means "create a new file" inside the working directory.  In this case commands.txt is the name of the file being made. A file can be named anything. Be sure to give your file th eproper extension. Look inside the newDogOldTricks. See commands.txt? Note that you can create multiple files with space-separated names. e.g. touch commands.txt art.png 


___ 10. ls


Do you see commands.txt?


___ 11. touch eat.png sleep.jpg play.txt poo.html [then ls again]


Do you see all the new files?


___ 12. cp eat.png eatMore.png [then ls again]


cp means copy file(s). In this case the first argument (eat.png) is copied and the second argument (eatMore.png) is the new named copy. This all takes place within the current location. You can also copy something to a new location using this form:  cp play.txt ../Desktop


___ 13. pwd


Bearings!


___ 14. cd ../


Where are you? You should be in Desktop. If you are lost use this command cd ~/Desktop


___ 15. cp -r newDogOldTricks newDogNewTricks


cp -r (r is for recursive) means to copy a directory and all its contents. 


___ 16. mv newDogOldTricks newDogNewTricks


move means move a file or directory to a location. The first argument is the source file or directory and the second argument is destination. newDogNewTricks will remain visible on the Desktop, whereas ..OldTricks will be nested inside ...NewTricks


To move multiple files into a directory, use mv with a list of source files as the first arguments, and the destination directory as the last argument. E.g. mv text1.txt text2.txt into ../../someplacehere


To rename a file, use mv with the old file as the first argument and the new file as the second argument. Be careful! If the second argument is an existing file or directory - it will be replaced!


___ 17. pwd


Where are you? You should be on the Desktop. 


___ 18. cd newDogNewTricks


Heading in!


___ 19. rm poo.html


rm means remove file. This does not send items to the trash, it irreversibly deletes them forever, so be careful! 


___ 20. rm -r newDogOldTricks


rm -r means remove directory and its contents [or children files]. This does not send items to the trash, it irreversibly deletes them forever, so be careful! 


___ 21. rm -r ../newDogNewTricks


rm -r means remove directory and its contents [or children files]. This does not send items to the trash, it irreversibly deletes them forever, so be careful!  


Want more Terminal commands?


Try: date [clear enough], df -hl [check harddrive space], top [identify memory hogs, q to quit]. For a list of all commands available in the Terminal, hold down Escape, then press Y when prompted. Use the space bar to load more commands, and press 'q' to exit this view. To view the details of a specific command type man command, replacing the command with the specific command you are researching, press 'q' to exit this view. Screen getting too busy at any point? Type the clear command [or you can use the GUI simply Shell > new window]. 


Command-line Reflection


Have a conversation about the experience. Some artists, designers, and devlopers continue to operate from the command-line interface because it is less constrained and provides access to many functions and processes that cannot be accessed through a graphical user interface. If learners are interested in pursuing some more involved forms of new media art and design practices [e.g. open source projects, etc] they will likely come across files shared through a git repository. Having experience with command line will prepare learners for the git environment. Artist and designers also frequently use Programs with built-in command-line interfaces. If learners are not interested in adopting or moving forward with command line interface they can use this experience as a point of reference in contrast to the experience of graphical user interfaces. read more: https://en.wikipedia.org/wiki/Command_line_interface and https://en.wikipedia.org/wiki/User_interface 




part 02: Graphical user interface [GUI]


general information


The GUI is a ubiquitious feature in contemporary [screen-based] life. Graphical user interfaces abstract the underlying machine language, making [constrained] operations easier and/or more entertaining for users and consumers. Every computer, smart phone, e-book, game console, ATM and store checkout machine, or task-oriented device involving a display [and the software running therein] utilizes visual windows, icons, menus, and a range of paradigms, idioms, and skeuomorphs to guide user engagement towards a predetermined set of goals. Artists and designers making interactive work for screens or incorporating screen components in an installation should be conscious of the way humans have learned to navigate graphical user interfaces and the conventions that have been adopted [and taken for granted] over time. There are many accounts of GUI histories online [https://en.wikipedia.org/wiki/History_of_the_graphical_user_interface, and http://arstechnica.com/features/2005/05/gui/1/, and http://www.theoligarch.com/microsoft_vs_apple_history.htm, and http://toastytech.com/guis/guitimeline.html].


discussion


Some of the people often left out of GUI historical accounts are the creative directors and graphic designers who are responsible for the visual elements and icons that have become cultural conventions. Susan Kare is an example of a designer who has developed graphics that have had a significant reach. Review the follwing resources. Consider Kare's work in contrast with the command-line exercises in part 01, and consider how her design work in the 1980s, and other early visual GUI forms, still have a presence in current GUI conventions. What remains? What has changed?



  • Susan Kare general information: https://en.wikipedia.org/wiki/Susan_Kare

  • Susan Kare lecture [2014]: https://vimeo.com/97583369 

  • Susan Kare sketchbook: http://blogs.plos.org/neurotribes/2011/11/22/the-sketchbook-of-susan-kare-the-artist-who-gave-computing-a-human-face/

  • Susan Kare early appearance [start at 8:30]: https://www.youtube.com/watch?v=lRpHzN2otS4


exercise


Comparative analysis can be used to detect trends or patterns. This exercise is intended to provide a structure for visual analysis of GUIs as a way to see visual conventions. We don't need to go to a museum to do this GUI research because chances are these platforms are with you at all times.



  • If your group is studying operating systems, look at current operating system GUI. [desktop or mobile]

  • If your group is studying web, look at current browser GUI. [desktop or mobile].

  • If your group is studying games, look at current game GUI. [web, mobile, portable, console, and/or PC; menus, navigation, heads-up display/status, context-sensitive info, mini maps]

  • If your group is studying a particular type of app, look at app GUI. 

  • If your group is studying software, look at software GUI. [might compare commercial and open source]


There are many ways to go about studying a category/platform and projects should be meaningful for the particular situation. For example: in web foundations level courses we have in the past had each learner identify a website to diagram. Using only rectangles, they illustrated the GUI footprint on tracing paper reducing the primary elements and layout down to the most basic forms, leaving no trace of brand or content info. These [quick, only a few minutes, the point is to generate a cluster of content-free descriptions] drawings were tacked to the wall and organized according to compositions. Often participants could identify websites with just a few visual cues. Sometimes variations on the same sites revealed biases, and prompted cultural discussion like pervasive visual influence/normalization [hours a day on popular site] or more formal discussions on inattentional blindness, data, etc. This fall [2015] we are doing this GUI diagraming exercise with a beginning game course at the beginning of an interface/interaction cycle. We will share those details when they are formalized.


[note: in the past we have taken students to a museum to study in-gallery iPads loaded up with "educational" info, looking at both the GUI/content mix, and observing public engagement with the devices. We have also taken students to ATM machines on campus, and AT&T stores close to campus for similar GUI in situ research experiences]




part 03: Natural user interface [NUI]


general information


What is Natural user interface? --> "In computing, a natural user interface, or NUI, or Natural Interface is the common parlance used by designers and developers of human-machine interfaces to refer to a user interface that is effectively invisible, and remains invisible as the user continuously learns increasingly complex interactions. The word natural is used because most computer interfaces use artificial control devices whose operation has to be learned." [from the wikipedia entry: https://en.wikipedia.org/wiki/Natural_user_interface]


discussion


What is speculation? --> "speculative: adjective spec·u·la·tive \ˈspe-kyə-lə-tiv, -ˌlā-\ : based on guesses or ideas about what might happen or be true rather than on facts : tending to think about what might happen or be true : tending to speculate : showing curiosity or uncertainty" [from dictionary entry http://www.merriam-webster.com/dictionary/speculative]


exercise


Projects components and timing should be meaningful for the particular situation. The goal with this exercise is to investigate further a future of interface - real or imagined. Considering NUI and the role of speculation [in creative process], individuals or groups plan, propose, experiment, refine, mockup/wireframe/prototype/perform, test, iterate/practice, and demo a boundary pushing interface project - conceptual or applied. This project can take place in one meeting time for quick thinking or be spread out over a number of weeks or months depending on the final project form, and class/workshop goals.  


Contributor(s): Jessica Parris Westbrook, Adam Trowbridge

Updated date: 01/13/2016 - 13:12

Software: linux, mac

Other Software: project-dependent

Other Hardware: project-dependent