Twit Knoll Homepage
Background
Twit Knoll is my project initiated from the Major Studio, last semester (Prof. Katherine Moriwaki) and I introduced initial prototype on May. This project started from my interest ‘warm interface’ and includes my research area such as visualizing live data with API, UX on evolving mobile platforms, 3D graphics. You can find the concept and design process documentation on this page.
http://www.cre8ive.kr/blog/?cat=311
In this summer, my primary objective was to finish core functions and to launch the initial version of Twit Knoll. Through the progress, there were a lot of unexpected issues and I had to refine the design continuously. Especially, continuous memory warning from iPad’s limited memory made me afraid of using images and animations. Even though iPad’s screen is large and support 1024×768px resolution, the RAM is 256MB. Supporting both landscape and portrait mode was also big issue – it was not simple as I expected because I used images to construct all of the screen.
First I finished the Friend Timeline scene and brought this structure to the Public Timeline. Then I designed and developed Mentions and Direct Messages. Finally, I designed and developed User Profile scene. In this process I also continuously modified and rendered 3D graphics for rich user experience. Of course there are many features that I had to exclude in this version because of technical and design issues. Here are some of the history of my summer progress.
Tweet Message Box and Readability
After demonstrating the first prototype in April, I started design and develop ‘Friend Timeline’. During the development, I continuously refined the design and the final design is somewhat different with the initial design. In the aspect of reading tweets, there were issues of readability and I iteratively revised the design of message balloon box and the typefaces. I initially used UIWebView – a UI element of iOS – to detect user names and URLs. However I had to changed this to use UITextView because the Web View look bad when it was scaled down (text was shown without anti-aliasing). (To give the users the sense of distance, I used scaling transform for the birds and their message boxes.) UITextView supported anti-aliasing with scaled down size and showed good quality of text and enhanced readability.
Secondly, I also had to revise the design of message box. I had to consider the width of paragraph and also had to think about the overlapping relationship with other birds and their message boxes. I used Korean, English and Japanese to design the text box.
<Initial prototype on draft sketch – Had to think about the location of message box>
<Initial prototypes – Message Box design – Testing the width and height of text>
<Initial prototypes – Message Box design – Overlapping>
<Message Box design – Revised>
Tweet UI
In the initial design, I located the buttons for RE(Reply), RT(Retweet), DM(Direct Messages) and PF(User Profile) in the message box. But this looked somewhat complex and I wanted to give birds touch interaction. Then I became to think about my behavior of reading and browsing tweets. I usually just read and scroll the tweets. I use the buttons only when I met good tweets to share or when I have to reply to someone. So I decided to hide the buttons and to show it when the user touches birds. This made a good reason for the users to interact with birds.
<Tweet UI – Separated with Message Box>
<Tweet UI design – Revised>
Multiple UI orientation support – Landscape and Portrait
For every scenes, I had to think about the portrait mode (I started this project only in landscape mode). To reduce the amount of memory usage, I had to use one background image for both orientation. Since the display resolution of iPad is 1024×768px, I made 1024×1024px sized background image to support both orientation. But in the entrance of each scene, I wanted to have some transition animations and I utilized hidden length of the image for panning animation. With this 1024×1024 background images, I had to adjust position of birds and message boxes. For the Friend Timeline scene, I used different background images for landscape and portrait to give more rich user experience.
In the technical aspect, I had to get two UI state of the device – previous orientation of device before launching TwitTown, current orientation of device. For previous orientation of device, I could use the orientation of status bar of iOS. For the current orientation of device and rotation event, iOS provided status information and callback methods.
UIInterfaceOrientation interfaceOrientation = [self getDeviceOrientation];
UIInterfaceOrientation interfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration
<UI design for landscape and portrait orientation>
Bird character animation
Subtle animations can enhance the user experience and immersiveness but on iPad, it costs memory. For 1 second short animation, we need 30 sequential png images. So I optimized the number of frames, size of the images(birds) and type of animations. Finally, I made three different types of animation for birds – Flying(Incoming new tweet), Speaking(Idle), Shifting(Browsing), Dancing(For touch interaction).
<Bird animation – 10 frame images for touch interaction (Total 40 frame)>
Gesture for browsing tweets
From paper prototype and iPad prototypes, user testing gave me good inspiration for browsing tweets. In the final design, I programmed gesture recognizer for both up/down and left/right direction.
Memory warnings
Memory warning was one of the most difficult hurdle for me in this project. Since all of the App is constructed with images, it uses a lot of memory. Pure 1024×1024 of background PNG image’s every file size was 1-3MB, which is huge for memory of mobile devices. Consequently, after switching between scenes, the App crashed continuously. I went through long iterative process of refactoring, optimizing the code, testing, debugging. Finally, I could resolve the problem with re-designed code with releasing and deallocating all the memories for the scenes that are not on the current screen. Endless test and optimizing with tool Instruments(Leaks/Object Alloc) was somewhat painful.
Submission
I prepared final distribution binary and submitted on August 1st, 2010. This is the icon design.
Next steps
Even though it took a longer time than I expected, it’s been a great pleasure to make small moves and improvements both in design and technical aspects. I love this project because I could enjoy every elements – 3D design, UI design, software structure design and programming. Above all, it is great to finish a huge project. However, I think this is the beginning of this project, since there are lot of exciting design elements to do. There are many fun visualization ideas that I couldn’t do because of memory issues but I think I can make it soon with optimized way. In the functional aspect, there should be the function ‘Search Users’, so that users can find a friend with names and follow. Navigating through the followers or following of a specific user is also important basic functions that I should add.
