• 1.0  Introduction

    Company name : Little Interactive

    URL: http://www.littleinteractive.blogspot.com
    Target audience: Company leaders and organization, 20-40 years old, Malaysia

    Little Interactive is the name of Web Design Company I created for this assignment. URL for this website is http://www.littleinteractive.blogspot.com. We are required to use blogspot to create the website for the company. Little interactive is a web design company with a slogan  “Little interactive make you and me closer” had shown the company is very emphasizing on interactive between human and devices. There are 4 main sections for the website which are home, about services, contact us.

    2.0  Meaning of semiotic & sign
    Semiotic is the study of symbols, signs and signification. It will mostly concentrate on how meaning is created but not what it is. Every person might have different perspective toward the sign. We should try to understand the way of target users to interpret signs when in designing the interfaces. There are 3 ideas in semiotic. First, signifier is referring the object while signified is refer to the concept. Referent is referring to the particular instance of concept indicated by the signified. Semiotic is a great tool in design the interfaces. It will help to improve the communication and interaction for user with the interfaces.

    There are a lot of signs we see in our daily life. Sign can come from object, act, flavor, odor, sound, image or word ( asdasd) Sign can be build by several components such as shape, size and color.  In addition, sign can be break into 3 kinds: symbolic, iconic and indexical. Symbolic is the image contain abstract object and the meaning had derived long time ago. Iconic is the image that has the direct physical connection between the represented object or real representation. Indexical is the image has physical relationship and casual for the image and the thing it represented. In order to interpret the sign, it is vital to understand the share-culture context.

    3.0   Functionality of semiotic in Little Interactive website
    We will concentrate and discuss on 4 main areas, which are hypertext, hypermedia, animation and audio.

     3.1   Hypertext
    Hypertext can be used to comprise several pages and links to connect all the pages together. It can also explained as the text on a webpage can let the user navigate to other pages. The navigation can be in linear or non-linear way. It is possible for a page contain multiple hypertexts. Hot spots is the position of the links where they are response when mouse click. Color for the hypertext will be the visual clue for guiding the user in the navigation.

    Hypertext had been implement to Little Interactive company website. For the main navigation, we had implement hypertext into it.


    Color for the navigation text will change to blue color in order indicate the text can be clicked. This not only happened on the main navigation, it also on the home page’s portfolio titles and other hypertext. All the hypertexts will change to blue color when mouse cursor move toward them. This had give the hints to user the text is hypertext and can be clicked to go to another page. Below is some screen shot for the hypertext being used in Little Interactive company website home page.






    3.2  Hypermedia
    Functionality of hypermedia is almost similar to the hypertext but hypermedia no longer using text as link as connection to other pages. It uses image, sound, animation and video to link to other pages. However majority of the hypermedia in a web page is images because it help to enhance the website visual and appealing. Icons are replaced instead of color for the visual clue to users.


    The portfolio of the company had been shown as image and work as hypermedia in the website. User can click on the image of the portfolio to further understand the project page.


    Hypermedia also been used in social networking icons as the link to navigate to our social network website including Facebook, twitter and YouTube.


    This also same to the website sidebar which also use the image as the hypermedia to navigate to latest portfolio.


    The logo image on the left top is also hypermedia to link to home page.

    3.3  Animation
    Animation is an image sequence which change in duration of time. It will mean adding motion, move or change the images or pictures in certain time. Meanwhile, animation also serves as the feedback to the user that their request is in progress. Another job of animation is to indicate the urgency of time. Furthermore, it also shows the changeability of data.  Emotional tool is also part of animation role.


    In the home page, after user click load more, there will be turning circle animation to indicate the request is processing. This had implement the animation in the Little Interactive company website.


    The banner is changing the image every 3-second to show the company portfolio, slogan, vision and mission.



    Inside one of the portfolio (http://littleinteractive.blogspot.com/2012/10/mobile-apps.html) had implement animation in order to show the details of the portfolio.


     
    Lastly clock in the home page is to let user know the current time. The clock also implements the animation.


    3.4  Audio and video
    Audio can create the atmosphere in the website by adding background music. Moreover, audio can be the feedback for the interaction. Usually video is used as a clip embedded in the website. Nowadays, a lot video portal such as YouTube, vimeo, dailymotion and others prepare the code and let user embeds the video in website. Video is more detailed in motion compared to animation.  Besides, it able to integrated with audio compared animation, which only have images. Video also enhances the understanding of user to certain subject.


    Little Interactive website had embedded one of their portfolios in the home page. This will create and build up the user impression to the website.


    Moreover, it also embeds the video portfolio together inside one of the post. (http://littleinteractive.blogspot.com/2012/10/udock.html )
    However, there are no background audio for Little Interactive company website due the music will restart and annoying after user swap to another page.


        4.0 Reasons for choosing this theme
           4.1 Fonts, color
          I had chosen this theme due to the consistency in using font for this theme. All the fonts are san-serif.  Meanwhile the font size for all posts is almost same and easy to read by my target audience. The font color is also similar for all the post and navigation texts. This is because of Little Interactive website implement consistency from learnability into font design. (Dix, A et al., 2004).



           Another reason I picked this theme because the background color for all the pages is same. Strive for consistency is emphasized in the Shneiderman’s Eight Golden Rules and the website does follow this rule. (Dix, A et al., 2004). Besides, all the links are in blue when cursor hovers to it. The grey color background had created the elegant and clean mood for the website. It will make the portfolio images look better, more contrast and vibrant due to background color of the website is in dull color. This also makes the text more contrast and good readability.

           4.2 Layout and navigations


           Another reason I picked this theme is because of the layout arrangement. The theme had separated the page into 4 sections which are header, content, sidebar and footer.
          The header, sidebar and footer will remain the same even user is navigating to other. User will not easily get lost in the website and will get the content they wish to get. As one of four principles from knowledge about human cognition – It is easier to perceive a structured layout. Not only this, users have difficulty focusing on more than one activity at a time regarding to one of the principle about human cognition.  As a result, content which is the portfolios had been given prominence and grouping in order to attract my target audience. (Debbie Stone, Caroline Jarrett, Mark Woodroffe and Shailey Minocha, 2005) Moreover, user can easily find the latest portfolio, social media by looking on the sidebar due to consistent layout. 

          Another reason I pick this theme because the main navigation and search button are located on the top right. These had created the familiarity to the first time visit user. 
          This had implemented the familiarity from learnability to the website. (Dix, A et al., 2004) In addition, logo on the top left is also home button to navigate to home page. It will great for the user who uses to click logo to back to home page.
           In addition, navigation also gives the feedback instantly. For example, role over the portfolio image then will appear the black overlay with magnifying glass to indicate click on image to know more.  Again, the website use one of Shneiderman’s Eight Golden Rules which is offer informative feedback. (Dix, A et al., 2004)


     4.3 Used Widgets


         There are several widgets I had used in this website. First, I inserted the clock widget in order to let user know the current time when they enter my website.


          Secondly I add in the widget to let user follow company updates through email. 




          In addition, I also add in the favicon so that people do notice the company logo. As in four principles regarding human cognition, one of them is users see what they expect to see. User will predict that he favicon will show after user enters the link to the website. (Debbie Stone, Caroline Jarrett, Mark Woodroffe and Shailey Minocha, 2005)


            I also added in Google map and contact form in the contact page. For the user who do not know our office location can refer to the map. 


          Furthermore, I add in Facebook widget for the user to like my company page in Facebook for promotion and get more traffic. Meantime, I can keep in touch with the potential clients in Facebook. 

     5.0 Feedback from sharing

      

            Above is my proof for the sharing to friends for user testing in order to make the website better.  There are few things need to be enhanced in order to make the website better. First, my friends suggest is the current page hypertext should highlighted to indicate current page location. So that user would not get lost and clearly know where the page they current locate.

          Secondly, they suggest adding tag or labeling so that can make the portfolio into categories. This will help user easy to find the categories they want to view for the portfolio.


            There is a duplicate contact content in contact page. Try to replace with other information

          Appearance of magnifying glass when roll over the portfolio in the home page is confusing user due to they thought the image will be zooming in and enlarge but not navigate to other pages.

           Lastly, user needs to go back to home page in order to continue viewing next portfolio. This might be troublesome to them. 

     6.0 Conclusion
           As conclusion, the website still has the room to improve in order to attract more users. Promotion of website should be concern to increase website traffic. 



















    References:
    Art Green (2012) Temple Run Review. http://www.gamezebo.com/games/temple-run/review (Accessed 20 September, 2012)
    Chittaro, L (n.d.) Visualizing Information on Mobile Devices.
    http://hcilab.uniud.it/publications/2006-03/VisualizingInformationMobile_IEEECOMPUTER.pdf (Accessed 19 September, 2012)
    Dix, A et al. (2004) Human-Computer Interaction, 3rd edn, New York: Pearson Prentice Hall.
    Imangi Studio (n.d.) http://www.imangistudios.com (Accessed 20 September, 2012)
    Shneiderman, B and Plaisant, C (2005) Designing the User Interface, 4th edn, Boston: Addison Wesley.
    Stone, D, Jarrett, C Woodroffe, M and Minocha (2005) User Interface Design and Evaluation, Open Univsrsity, CA: Morgan Kaufmann. Available in Google book: http://books.google.com.my/books?id=VvSoyqPBPbMC&lpg=PA359&ots=d5M0U0oST8&dq=stone%20d%20l%20and%20stone%20user%20interface%20design%20and%20evaluation&pg=PP1#v=onepage&q&f=false (Accessed 19 September, 2012)
  • Ship of Atlantis is a point and click game which required to use your brain to escape from a trapped ship.
  • uDock online banner is a banner we did for Aeflex for Hong Kong International Technology Expo. In the banner we used the QR code to guide user to the official website.



  • We did also the Chinese New Year apps as the wishes to all clients. User needs to shake to have the interactivity. Moreover, user can capture their photos and customise. 




  • We had tried to redesign Yong Sheng website to more Chinese traditional style which fit to their brand and identity. Moreover, we recreate the 4 female characters to represent their products.




Subscribe to: Posts (Atom)