Preliminary Study on Educational User Interface Architecture for Social Network

Social network has becoming a major platform of daily activities from leisure to business purposes. Educational activities could also benefited from this trending platform for its dynamic functions. Among educational activities that could be performed on social network are collaborative studies, blended learning and group activities. Through this platform, students and teachers can be connected to each other for the purpose of exchanging ideas and information. High-end interaction and connectivity between students and teachers makes social network popular as learning platform. A preliminary study on an online tuition conducted by latihminda.com has been conducted. The focus of this study is to proposed a suitable educational user interface architecture for social network education. Elements of real-time interaction and intelligent avatar used by latihminda.com are studied and an educational user interface architecture for social network are proposed in this paper.


Introduction
Effect of technology in our lives has dramatically changed. Nowadays innovation towards technology has become important especially in attaining knowledge and information []. Due to this matter, learning institutions need to adapt the new technology as a tool or platform for teaching and learning to relay skills and knowledge among the students in a better and efficient way []. In addition, the adaptation of the tools or platforms that fancy to younger generation most likely attract students to participate in active learning therefore improve their understanding compare to traditional methods []. Traditional teaching and learning methods, acquire one way interaction and promote little interactivity among teachers and students []. With the technology arise, many computer tools and platforms are used to promote better interactivity using off-line materials []. Recently, social network has becoming a number one platform for communication medium []. Social network provide real-time communication and provide many collaborative activities for its users [].
People are connected with each other to exchange idea, information and interest to make sure they can be competitive in new era. In order for them to do that, a social network is one of a platform to build connection. Social network is one of the most unique technology inventions that are accepted globally. A social network is described as social structure by individual and organizations which are connected through various social familiarities [1]. It eased communication and enabled the enhancement of business. People worldwide connected to each other to get experiences and ideas. Communities grow without seeing or interact face to face with others. Technology innovation provide a social network to learn about different and spontaneous communities called Learning Communities. They are then defined as "shared interest domain" in which the parties involved interact with each other and learn together to develop a shared repertoire of resources [2]. Social network has expanded it usage to learning institutions since it could be an alternative medium to share skills and knowledge among students. Social network has provide a better platform for students to discuss their subject matter in a more improvised and easier way, compared to the earlier days when they had to be in the same room at the same time with the use of textbooks[]. Students are promoted to be active, explorative and excite to study more since it gives them a moment of enjoyment []. A study shows that social network had been proven to provide the competitive learning process among higher educational peoples and provide the creation of learning communities that foster collaboration [2]. Students are demanding more connectivity and interaction in the learning process which makes the used social network is appropriate for learning platform. Social network like Facebook, YouTube and Twitter are example of widely use social network in the world. These social networks are mostly used as communication and business purposes. Educational social network that tailored for teaching and learning purposes should provide similar functions as what had been provided by Facebook, YouTube and Twitter, or even better. Therefore, appropriate user interface framework should be provided as a references for educational social network designer [3]. The focus on this paper is to propose an educational user interface framework of social network. This paper is divided into ..

Literature Review
A.

Social Network
According to [1], social network is varying greatly in their features and user base. Some social network are designed to focus on specific areas or language groups and some are designed for particular ethics, politics or identity, religious or sexual or other categories. Social networks can be divided into many categories such as profile target. Profile target are organized based on user profile, for example: user profiling method that Twitter and Facebook adapted. Second categories is content focus, this is where when social network provider used user profile as secondary role as a content. For example, YouTube users could share a video while Flickr users can share a photo [1]. However, due to the huge size of social network today there are various issues in social network. Generally it is more to social issue involving privacy, copyright and security. These are also matters in existing social network architecture though it may not be an issue in user interface architecture. Further discussion on user interface architecture is explored in the next section.

B.
User Interface Architecture In paper [10], authors define user interface architecture as guideline to design user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices with the focus on maximizing usability and the user experience. Having good user interface architecture ensure user's interaction smooth sailing with highly users' satisfaction.   Architecture shown in a tree comprise of User Interface layout as the first level of the tree hierarchy followed by User Elements. User Layout are focusing on the view for each group of potential user while user elements are subsection of available views for general view and also for the view group. Following this architecture, android programmer should manage their developments and all the possibilities for the user interface that represents resource that managed by objects. In order to develop Android programs, developer has to design programmatically or procedural the user interface based on the framework in Figure 2 and to know the relation between user interface elements and their corresponding classes. Figure 2 also shows the parent-child relation between elements and controls of containers or collections have to manage other child controls. Based on these two examples of user interface architecture show that user interface architecture is important in any software development []. As for social network application, user interface architecture is also crucial and should be overlooked.

User Interface Architecture for Social Network
There is no specific User Interface Architecture for Social Network defined.
Though, Social Web defined to encompass by six frameworks refers to Figure 3. Frameworks are namely: Identity, Profile, Privacy, Social Media, Activity and Emerging Frameworks. These six frameworks are integrated to each other to compose a social network platform. According to these standards, social web for security are divided into 6 different frameworks but each of it interrelated to each other. Identity framework consists of authentication and authorization which interact directly with the users. While profile framework, consist of distributed attributes and work closely with identity framework and 459 privacy framework. In privacy framework, policy and rights are the important elements of the framework which related with social media framework which consist of tags and reviews. In addition, activity framework follows closely with its activity streams and syndication and followed by emerging frameworks that normally related to analytics and e-commerce (this deals with other existing social network applications). This has become a guideline for the developer for securing most of the social applications.  In other paper [7] the author proposes a modeling framework that incorporates simulation of personality characteristics and social networks in the adoption of dynamic pricing and demand response to adapt with the framework the author focusing on a particular aspect of smart grid adoption. It use based graph construction methods and simple agents to simulate of preliminary smart grid technology. It applies social networking techniques to smart grid adoption by using methods of changing the characteristics of user in the grid. All of discussed architectures help social application developer in different perspectives. None of them provide a guideline for …..

Examine Existing ( Case Study)
LatihMinda.com [16] is an existing works that have inspired us to design the framework system. LatihMinda.com is number one live tuition online in Malaysia that using multimedia element in their educational. Teachers show the learning using multimedia concept and receive feedback from student by what apps application. They apply social network concept by using what apps application and create what apps group and communicate with voice application to make connection with each other's. With this approach students will find it more exciting and enjoyable in the discussion process. Based on interview session with founder of latihminda.com, he said student more focus and show the interest in learning process. The advantages from online tuition student can decide to online the application anywhere they want to use it. It is more safety because the learning process can be done at home and parents also can monitor their children. Thus this method can help parents from sending their children to class and besides that can avoid from traffic jam. According to founder, the unique features of e-learning is it have a comprehensive contents where all information can fit it into website. The conservative way we have so many files to keep the information and make the contents looks messy. By online learning teachers can put others links to access to external resources like other website and animations from the contents. Besides that it have developed in accordance to sound instructional design principles includes animation and graphic. To get effective learning students usually more interactive with colors and graphics. It actually depends on age but to avoid student disturbed and not focus in learning process teachers should get various techniques in teaching. Thus if students are focus in the learning process so can have large number of solved problems. Below is example of educational social network by latihminda.com. Both pictures in Figure 2 and 3 below shows the element using by teachers and students. As shows in left teachers using multimedia elements in teaching. And in right student response via whatapps application using voice element. Teachers are using graphics like paint applications and draw the contents to make learning process. Disadvantage in the website is students still need to wait until their teachers finished drawing then they can interrupt to ask question by voice element.

Analysis Cases
The basic techniques use in the framework is determine by many design decisions. As example, capability to adapt with environment can be addressed by using machine learning rather than using any rules to interpret human behavior, we actually have potential in learning application, user and context depends on rules by monitor the user's behavior in sensed context [15]. For the case study, we like to examine further the framework by [13]. Figure 3 is a EDC environment are unifying diverse system that support by problem solving tasks with two integrated spaces, reflection and action space. These spaces are related with stakeholders submerged in the use of Environmental EDC. This submerged is also an outcome of the complementary role the environment plays within the context of the human interactions between the members of the user group. EDC environment shows the current realization by EDC Framework. Action Space function is using by users to hold around to enhanced table as shown in the Figure 3. It is currently implemented as touch sensitive surface, allows users to manipulate calculating simulation expected on the surface with interaction with the physical objects placed on the table. As example, users construct and modify a model by placing and moving physical objects that represent the objects such as schools and bus stop. Computer table flanked by two other driving the touch sensitive surface is shown behind the users. This computational whiteboard serves as the Reflection Space. As shown in figure users filled up a survey of transportation webbased which associated with current constructed model. The Action and Reflection spaces are using the Web as medium to connect by communication between the two computers. For Physical space, through the immersion of people within the representations of the problem-solving task, creates an integrated human/computer system grounded in the physical world. By unifying two tightly integrated spaces, an action space and a reflection space, the EDC framework supports in problem solving tasks. This can helps communities to face with complex problems by allowing them to explore and more fully understand the problem space. It also helps the community to utilize on the synergy created by their cognitive abilities and collective knowledge.  Figure 4 is a icons on the desktop VR HCI that presented to the user using an intuitive interface with customized icon The framework uses a colorful icons of learning process, beginning with simple concepts, gradually advancing towards more complex ideas in a variable is a data-holder or a container used to hold data. In our day-to-day life, we use different types of containers to hold different kinds of things. Similarly, in a program, different data types are used for holding different kinds of data. HCI community can play a constructive role in responding to concerns and questions raised by users. To understanding of appropriate design and uses of computer technology, a framework for interaction between HCI and societal/political issues can provide the context that informs efforts to proactive contribute [14].

Propesed Framework
The main objective of this research is to build the framework can be useful for student and teacher to enhance the learning process. A framework can be used as a reference to help us approach and resolve new problems of a similar nature because of standardized set of concepts, practices and criteria for dealing with a common type of problem. We developed a framework to capture the understanding of the social network in education in terms of their usefulness as reusability qualities and predictors of the maintainability. The goal of the assessment framework is to provide support for assessment of maintainability and reusability of aspect-oriented systems based on the proposed objects. The framework components can assist in data collection and interpretation and help organize the assessment process [10]. From this view, we can measure the basic components of the framework between student teachers and social network.
Teachersstudents are interact to each other using social network as medium of communication. HCI consists of the interaction between people and computers and in this project we focus on communication between student and teachers. The concept of the framework is that those designing a HCI system should incorporate design elements that enable the user to cope with possible problems caused by dependent variables in an environment that a human user cannot control [12] by adopting a systematic approach to the process. In the HCI interaction model, the relationships between individual components are considered to be interactions, and each interaction performs a unique task.
In the framework proposed, we can put the animation for children. By developing an animations for the effective representation of the concepts of the subject contents. Therefore, the contents to enable the subjects to gain access to additional animations and resources mode available in the internet, links are also provided. Animation and graphic can provide the interactive assessment as a learning tools that can increase capacity thinking from students. The intelligent avatar is a pedagogical agent like i-Teacher, provides intelligent speech feedback on all questions posted by the students and also provides feedback on questions posted to i-Teacher via a computer-stimulated voice and printed texts. It is consisting of a virtual reality avatar with a high degree of human appearance in highly interactive and high degree of realism. This feedback is designed based on common questions asked by students in the actual classroom setting. Thus, i-Teacher allows students to experience an authentic learning environment where the students can select various characters according to their preferences. It provides highly intelligent responses to all questions (social questions or course contents related) forwarded to the avatar. Based on research by [20] they proposed a innovative solution called as Emo-Avtor. It is integrating three of human senses into multimodal expression (visual and haptic) and help the interaction during communication process between different user. In Figure 6, we can see for multi intelligent avatar for student. Students and teachers share texting space and share multimedia space. Which means they can texting and using graphics together in learning process.

Discussion And Future Work
We have found that education is can be more effective when social network will include in education system. The proposed framework had been decide with expects for their opinion. Based on discussion with founder of latihminda.com, he impressed when we proposed this framework to him. Currently latihminda.com only have sound using voice in whatsApp application for student to give reaction to the teachers. With user interface framework we added various elements into it such as graphics, pictures and intelligent avatar as an agent to provide two way communication between teachers and students. We also get feedback from another expect which his expertise in technical programming. He agreed and impressed with framework and how the elements can be main point in education line. Because he sees nowadays social network be use by all level of society. But he concern about too many elements used and make buffering to system. He recommend to split the program for student using computer and mobile. Program must be smooth and good system can avoid buffering to long. Although, due to time was limitation the planning can be add in several stages. As example for multi intelligent avatar for student can be develop in many styles like cascading style or tab style. With this enhancement, it can be accommodate more students in one time. And also we also can divide the elements by age. Propose framework currently support for student in secondary school but how about student for primary school and below 6. We hope can expend the user interface framework for all level of students in Malaysia.

conclusion
As a conclusion, based on user interface framework proposed, we have found that kind of specialized of framework can be more effective when multimedia and social network will combine togather where information dispersion can be reached by student and teacher.
In that sense, our ideas is to explore the importance of user experiences and improved an interactive interface. Thus, our proposal tries to bring the education to high level in social network. In fact, in the era the innovation of education have expressed the surprise about ease of integration on the learning. With the framework proposed, we hope teachers and students will satisfied and get more connection with each others.