We need to do most of our job with machine such as computers, mobile phone etc nowadays and we need to communicate with them through their interface, so this is an important media where the communication occur between human and the machine and hence to the human - user, the user experience need to concern in order to place an appropriate instruction to the machine and get the predictable result.
History of Interface
Interface, which is the media to let the user place instruction to machine. For instance, if we need to ask the washing machine run, we need to tell them how long we need to wash the cloths, need extra rinsing, etc. All the communication between human and the machine is thought its interface.
For Human-Computer Interface (HCI), I am back to the day of the typewriters. Since for the computers that we are used today, the interface is basically the same as the typewriters: they both have keyboard, the paper inserted inside the typewriter can be represented by the screen we have today, which both are used to display the output after we have placed the instruction into machine. (I do not choose printers since our eyes in mostly focus on the screen, like we focus on the paper on the typewriters.)
Typewriters are designed with English at the beginning, so its design is directly with sense of the flow of the text, which are output horizontally. And later on, the invention of the Japanese and Chinese typewriter, the operation of the machine basically the same but the orientation of the word is different, they have arrange the text in column, which base on the text flow with the traditional Japanese and Chinese. (Chinese is flow horizontally is from around the beginning of twenties century when they learn the western knowledge and this arrangement can be easier to translate the English materials into Chinese.) (Wikipedia, East Asian Script)
Besides, for the first computer, which is as large as a room with no screen, the user interface is just a keyboard (input) and a printer (output). When the user type in the instruction, the computer will process the instruction and the user need to wait the result output from the printer there.
In nearly the same period, as mentioned by Manovich (Manovich, 2001), the first computer screen is back to the monitor of radar, which can display the real time information detected by the radar to the user, so this is the initial prototype of computer screen.
With keyboard and screen, the user can input the instructions and can get the real time response from computer, so the user and the computer can communicate more directly with the interface provided by OS like DOS. Later on, Graphic-User Interface (GUI) have invented and first successfully adopted by Macintosh, which based on the Xerox PARC, and the GUI is used in nearly all interface in computer system like Microsoft Windows, Apple MAC, Linux, etc. Besides, GUI is also used even in computer firmware like BIOS, or HDTV set top boxes, DVD player, mobile phone, etc.
When User Communicate with Interface
Human-Computer Interface can provide a correct direction to user to do the things appropriately. When the users use the application in the first time, he will perform the prediction of the use of the application according with the first impression in a very short of time. (Tractinsky, 2000) If the users have the right prediction, which means the interface is more easily to be understood by the user and hence the usability is also higher.
To explain this results, Tractinsky have a brief explanation which quote from another work from Hooper about the interface design which compared to architectural design: “… the facade is the introduction to the building: ‘That is what most people experience directly’.” This has the similar situation in typography in graphic design area. (Tractinsky, 2000)
In typography, the fundamental idea is to arrange the text in order to let reader read as easy as possible in the book. In this disciple, typographers need to think how the font is designed which both suitable on printing and need to be read by the reader. And later, they have to consider different font type which have different feeling when the reader read this, for instance, Arial is more modern and Times New Roman are more formal and classical. In the development recently, typography also needs to consider in other media like poster or webpage other than books. Moreover, the typographers need to think about the suitable font they are using, for instance, using some block fonts to provide warning message so that they will get less confusion to think this is another meaning from the text. In this case if the typographer has used some cute font, which is hard to read and the font type also have the mood and feel that like seems not a warning message.
Back to HCI, apart from typography, suitable information arrangement is let the application more useful obviously. For instance, for the library system in university (Figure 1), all the command function is arranged vertically as a simple links, and all put on the top of my records area. In my sense, for the most basic web application so far, the page should separated into 2 frames (although frame is not recommended in modern webpage design but the concept is still apply that divided the page in left and right area on single page) and the command function are display on the left and my record area is placed on the right. If the system is in this arrangement, I need not to scroll back on the top to select the second item, and since the command function is just displayed as simple link and place in default line height, it is hard to separate each function individually. If using button instead then the user will clearly understand each button is represent one command function only and need not to read the text on the link very carefully to place the suitable instruction.
Next, when I using the search function in the system, there are some materials that need to request first and then transfer from another branch. But the Need Request information is place in the column of call number and indicated as “click request”, but the request button is on the top most of the page, so I do not know actually this need request at the beginning and try to find in the local branch. I think “click request” should be “request first” or “click request button” is more appropriated. (Figure 2)
To create an interface which communicable with the user (user friendly), the easiest way is to simulate the existing things in physical world. As I said before the interface is back to time of typewriter, but the function of computer is not the same as typewriter actually, computer need to do more jobs more than typewriter like display images, videos, and also perform drawing, etc. There are many command need to let the computer know but we cannot just use a very simple interface, for instance, interface from traditional telephone, which only have 10 numbers, to perform so much instruction to them. Since the keyboard of typewriter can let the user type their language on the paper, so I think the computer firstly simulate the typewriter by direct sense, which seem the user is talking to the computer like we are using IM today, and can get the computer response from the screen. Of course, when the GUI have adopted, the functionality of computer become more complicated and the keyboard cannot just fulfill all the user experience later.
So there are a need of the interface can provide more direct sense for the user to communicate with computer. For instance, for some multimedia software, they need to implement the interface simulated from the physical products, such as Reason. This music application has implemented the real audio set in the real environment and even the tactile of the cable behind the audio set. They need to have such kind of implementation since the physical environment is already run for a long time, when the user transit from physical environment to digital environment, the user can very easy to get use of this if the interface is entire copied the exact things from the physical world, they do not need to learn again since they already have developed the working flow of this. So copy the real environment is fulfill the thinking and working of the user when they use the tools, like the files and folder concept in OS that with the concept from our world that all the things in the world can be classified in tree structure in the biology classification.
Ultimately, if the interfaces need to follow this kind of philosophy, it should simulate all the things as we are using in the real world directly and a 3D virtual environment should be built. This concept make me think about it is the same scenario in the film Matrix, Neo (Keanu Reeves) need to fix the problem in mainframe computer and “login” into the computer world to find the problem and fixed it. His input device, a chair with a cluster of wire plug into his backbone, which used to provide the sense and control interface to his brain directly all the command just “think” in his mind and then can be done, and the computer response is also directly inject to his nerve and make him sense it.
This is an extreme ideal case but what I think is why we need such kind simulations to simulate the physical things we actually have the real object in the physical world, but we need to simulate a fake, not real one called “simulator” in a different media? As mentioned in Remediation (Bolter & Grusin, 2000), this kind of remediation is actually tried to improve or challenge the existing media. I take the electronic books and the printed books as example to illustration this idea. In traditional printed book, all content are static and cannot be updated after it is produced. But for eBooks, they are tried to simulate or upgrade the printed books as we can see in some fiction movie like Minority Report or Harry Potter. When the user reading the newspapers, the image inside is animated and the content is updatable after it have released to the user, which is improved the content quality from the traditional printed books.
This design is now prototyping and I believe it will be in market in near future. As the magazine WIRED, they are “rebirthing” their digital issue with the technology available in the market now: touch wide screen, horizontal flipping interface, static text page insert with videos, or other VR elements like the magnification and 360 degree turn around of the product that let the user see all the details. They have changed the experience to the magazine user.
This “revolution” digital magazines need to pay credit on the multi-touch technology that firstly used in iPhone and the new device type called slate PC – a successor of tablet PC, or in short, iPad. The technologies used by iPad actually let the user perform the motion similar to “flip” the books. This flip motioned is an important experience if reading a book. Even we already have PDF, or text website, we need to imagine very hard if we need to insist reading text as we are reading with printed books. And also it is not as convenience if we read the eBooks on hand since we need to read this from computer in the past, even a netbook computer is still not like the feeling of a book.
Before the slate PCs, Amazon has developed Kindle: a hardware device for reading. This device has used ink-screen, which is simulating a physical paper without the backlight of the LCD screen so that it is more comfortable for eyes if reading for long time. Next, Kindle (2nd Generation) is thin enough and the size is just like a traditional book so the user basically needs not to change the habit for reading book. For the design of control buttons, you can see the buttons is allocated on the left and right, and there are two next page buttons on each side respectively. You can easy to think that if someone is reading on the bed and carry Kindle with one only hand, if he is using left hand to carry the books, then he will use the left hand button to flip the books, and verse vice.
Similar to the WIRED digital magazine, Kindle used similar technologies designed on the slate PC, but without the multi-touch technology that can implement the flipping function, they have used buttons to simulate the flipping function in the device which try to guide the user think they are reading the real books. You may see there is some difference between Kindle and slate PCs, Kindle is a eBook reader which is simulated from printed books basically but the slate PC is a multipurpose device that can perform other jobs rather than just eBook function. So I think these devices is still in the transition period of eBook prototype which become he final products in fiction as mentioned before: need a thinner device, eye-friendly screen, animated content and updatable information.
Media Replacement, in term of User Experience
But for printed books and eBooks, will eBooks replace the printed one?
Since the books have specific language, like the cinema, someone has said the cinema will take over the radio. But the truth is the radio is still exist, in another perspective, we cannot just close the eyes and just listen to a film since there are some specific language that the film have, say montage or long short which is hard to hear only in the film. Although some people may say that there can be a montage of sound, but this actually different things already. So I think that is similar situation for the eBooks, if we cannot bring easily, no flipping hand sense, etc, most people may not think this is a magazine, just a very rich content of a website, or multimedia CD-ROM play on the screen.
Besides, if we just consider both are the interfaces of the text and images from the content creator, these two interfaces actually have different user experience to the user. eBook is just actually simulated some of the experience from printed book like flipping page (or content flow according to the reader speed), the printed text, images etc. But they have not the experience (or you can say have not yet implemented) from the readers of printed books have encounter like the direct contact with hand from the texture of the paper of the books, the smell of different type of papers, the actual feeling when the user using real pen writing on the real paper, etc. Besides, since the history of printed book is much longer than eBook, there are different stories occur already with printed book that eBook have not. For instance, there are many stories we always heard about a couple of lovers have separated in the war but just using the books to store their memories between them. So when the user have pick up a printed book, the books is come with these “bundled” experiences already, no matter the user is necessary or not, hence the experience is different and finally either one cannot replace the other, like the situation of some people like Lomography but the other people like DSLR camera to take photos.
Special Experience
Apart from the functionality, interface simulations can also provide another user experience that we are not easy to feel in our daily life. The situation is similar to we using the video camera to capture footages. We can use camera to capture the real footages to produce travelogue or documentary, but we can also use this to capture footages are not really existed in our physical world, to provide another experience to the user to feel the things they cannot easily contact.
In the old day of TV games, we have the game Mario Bros. by Nintendo. The machine at that time is just support less amount function, so the game environment can just only frame out by the producer with a long static background image. In our normal perspective, if the screen is move, we then think Mario is moving on the screen. But we are actually frame by the screen and the real implementation of the game is Mario is actually stand in a static position and act like walking, but the user is actually control the background moving toward or backward and so let us think in a reversed way relative to the static TV set, that is Mario is moving in the world inside TV. The ideas have explained from the installation called Moving Mario (Lam, 2008). This installation is recreating this TV game in the way that all materials on the screen present to our naked eyes, and the only movement is the screen and Mario.
We can also see the framing in the short film from Rybczyński, he also play with the frame that we just always think this is a static way and all the content inside is live, but actually also a reserved thinking.
For the multimedia games like The 7th Guest mentioned by Manovich (Manovich, 2001), the DVD from Gorillaz or other computer games like Counter Strike, we can see that they are merging different media into a single media - computer. Manvoich has separated them into 3 types: printed word, cinema and HCI representation. There are more possibilities if merging to these media as whole piece present to the user, which is more or less closer to the ideal 3D interface as mentioned before.
Since these games are target to procedure an environment setup by the producer, for instance, a story talking about a long time later in the world. So the cinema materials at the beginning is necessary for this purpose since it is very helpful to guide the audience go into the mood and feel setup in the game. Then the user goes inside the setup story to perform some investigations, or need to complete several task in the game. The control is just using the mouse and then they can look left or right, or walking around by juxtapose with cinema materials in between each action of the user. For the cultural issue, the mouse of the cursor and the menu for the game operation has also design that match with the tone of the game. This approach has also use until the game design at this moment.
But in recent years, use only mouse and keyboard combination control is not fulfilling these special experiences to the user. When we see the film Minority Report, we can see Tom Cruise is so cool that he controls the computer without any direct touch with the computer hardware. This type of control can be done by motion detection with a webcam like the game of Xbox 360. The games can detect the human actual motion without wearing anything on the body. This is more natural in user experience which Wii and VR devices cannot provided since they need the user carrying or wearing the devices on the body, which actually we will not need when we life in our daily life.
Other add-value of Interface
There are some of interface adding the value on its visual. For instance, reacTable have used motion detection with webcam setup on the ceiling to capture the motion with the special blocks on the table, the projector under the table will produce the corresponding graphics layout with response to the motion from the user like change beats, pitch, etc.
You may say why need so complex method to create a digital synthesizer, the old analogy or some software like Reason can also produced these sound directly. I will compare this with the visualizations of the media player. Since the reacTable is control in the dark, the pattern is generated in real time with the related input by user, the pattern generated may not have direct meaning but it can provide some abstract feeling like the visual in media player when we playing song. You can see it have cooperated with Björk in the show (Coachella 2007) that fully matched feeling with the song from her. Similar add-on effects can found in computer applications like transition between each slide in PowerPoint. We can add transition between the slides so that provide different mood and feel to the audience like in the movie. Or in some website included, for instance, a quick fade transition to present with the photos of pop star to establish his images.
But these add-on effects also have the wrong usage in some case. In Windows Vista, the security-prompting screen actually is the most annoying one. They designer want to increase the security level for some action and prompt to ask the user allow the system to perform these execution or not, which Mac OS have also this function inside. But in Vista, the execution is not appropriated since when this screen come out, the screen is sudden turn to black for a short of time at the beginning, and then just slow fade-in a dim black screen to provide the security message to user.
For this sudden black, this make the user think that the system is crush suddenly, or there is something wrong like in the horrible movie. Mac OS have this prompt but they have no this sudden black. And also user in Vista cannot predict this when such effect occur since if any applications touch the security level, this screen will prompt out, not just only from the beginning of the installation of the applications, sometime if the applications not writing well they will also touch this level very often even they just only have check the system update only.
Interface Change Human Mindset
With the improvement of technologies, some new data arrangement has come out and affects the interface and last change the mindset of the human.
The most typical widely discussed example is the hypertext media. This example is important since it takes advance of computer storage which can let the user randomly access any information inside, the user can access the information from a webpage in their own decision. Besides, a search function is also available to let the user find the data.
With this random access concept, the traditional files and folder structure in computer system may not useful sometime since, for instance, the movie. If I just classified the movies according the genre, there are some problems nowadays. For example if some film that mixed with documentary and fiction genre, then I do not know which folder where should I place the DVD under only either one of the genre. So the interface is also change it design concept like iTunes. Although you can create folders inside iTunes in files and folders structure, but it is actually place all the songs under the “Music Library”, no matter which genre. If you just know the name of the song, you can use the search function to locate this. If you need to group some similar items together, you can create a playlist for this. So in this way, I can put my film about in two playlists in the same time.
Besides, for the digital WIRED as discussed before, it is frame out the selected content by the producer. We can see from the video of the demonstration of their prototype, there is an index page with all information of each single page inside which can be slide by the user, this index page is not exist in the traditional magazine before. If the user makes the selection on a specific page, the page is magnified so back to the magazine environment again. But the materials actually existed already and arranged in the index, which may not be the same as the traditional magazine and the user need not to read the magazine from the beginning.
Conclusion
As mentioned at the beginning, the Japanese and Chinese typewriter is arrange the text in vertical, which base on the reading experience at that period of time: natural reading experience if the Japanese or Chinese is read vertically. So in HCI, the effective and usable interface should be used as natural as the user already experience before.
The easiest way is to simulate the read objects in the real world. Take another example like iTunes. When you load the songs in iTunes, you can switch to the cover flow view, which is simulated a real jukebox to select the CD covers horizontally and so the user can use the application with their direct sense.
During the simulation, remediation will occur, which may improve the old media or create a new mindset with the new one and hence the human mindset can also change with the new stuff. And in between the process of remediation, some special user add-on experience can affect the user experience like reacTable.
References
Björk, “Hyperballad + Pluto”, Coachella 2007, <http://www.youtube.com/watch?v=Kd4ef9edpSU>
Bolter, Jay & Grusin, Richard, “Immediacy, Hypermedia, and Remediation”, Remediation, MIT Press, 2000, 20-51
Dam, Andries van, “Post-WIMP User Interfaces”, Communications of the ACM, February 1997, Vol 40, No. 2
Date, Chiiyo & Naito, Takahiko, Design Rules “Moji’, Delight Press, ISBN: 9789866761645.
Lam, Keith, Moving Mario, <http://www.the-demos.com/movingmario/>
Manovich, Lev, “Chapter 2, The Interface”, The language of New Media, Massachusetts Institute of Technology. p62-115, 2001
Microsoft, E3 2009: Project Natal Xbox 360 Announcement, <http://www.youtube.com/watch?v=p2qlHoxPioM>
reacTable System, reacTable, <http://www.reactable.com/>
Schaik, Paul van and Ling, Jonathan, “The role of context in perception of the aesthetics of web pages over time”, Int. J. Human-Computer Studies 67, 2009, 79-89
Sorrel, Charlie. “How it Works: The Chinese Typewriter”, WIRED, Feb, 2009, <http://www.wired.com/gadgetlab/2009/02/how-it-works-ch/>
Trctinsky, N. et al., “What is beautiful is usable”, Interacting with Computers, Vol13, 2000, 127-145
Wikipedia, Horizontal and vertical writing in East Asian scripts, <http://en.wikipedia.org/wiki/Horizontal_and_vertical_writing_in_East_Asian_scripts>
Wikipedia, History of GUI, <http://en.wikipedia.org/wiki/History_of_the_GUI>
Wikipedia, History of typewriter, <http://en.wikipedia.org/wiki/Typewriter>
WIRED, Adobe and WIRED Magazine, <http://www.youtube.com/watch?v=T0D4avXwMmM>
0 comments:
Post a Comment