Graphical User Interface Design

Human Computer Interaction (HCI) is the scientific field that studies the interaction of users with interactive systems. The design of the graphical environment (User Interface – UI) of an application is directly related to the interface being attractive to the user with the appropriate colors, buttons, fonts and all those elements related to visual online communication. The course focuses on design research, reference recording and visual assessment in order to create a graphic story that offers interactivity in its use. The research and the creation of graphic scenarios for websites and applications with different objectives are the field of study of the specific course. Finally, special reference will be made to the user interfaces of Social Networking Media and 3D Virtual Environments.

Upon successful completion of the course, students will be able to know:

• The field of visual internet communication
• To design and create graphical user interfaces
• To design the graphic environment of websites and applications
• To evaluate the graphical user interface in terms of interaction and experience
• Comply with existing GUI design standards, rules and principles
• Perform quality checks and implement different development models
• To incorporate innovative practices and methods of graphic interaction

With reference to the level of learning outcomes, according to the Qualifications Framework of the European Higher Education Area, students after completing the course are judged to:

• They are able to use their knowledge and understanding, and their problem-solving skills in applications and problem-solving, in a new or unfamiliar environment, within a wider (or interdisciplinary) context relevant to their field of knowledge.
• They are able to communicate with clarity and clarity their conclusions as well as the knowledge and reasoning on which they are based and logical assumptions on which they are based, both to specialist and non-specialist audiences.
• They have the necessary learning skills that allow them to continue their studies in a largely self-reliant or even autonomous manner.

With reference to descriptors 6, 7 & 8 of the European Qualifications Framework for Lifelong Learning, students after completing the course are judged to:

• At the level of knowledge: they have specialized knowledge, some of which is cutting-edge knowledge in their field of work or study and which forms the basis for original thinking. They have a critical awareness of the knowledge issues in the field and its interface with different fields.
• At the skill level: they possess specialized problem-solving skills in their field, which are required in research and/or innovation in order to develop new knowledge and processes and to integrate knowledge from different fields.
• At the competency level: They can manage and transform work or study environments that are complex, unpredictable and require new strategic approaches. They may also take responsibility for contributing to professional knowledge and practice and/or evaluating the strategic performance of teams.

Theoretical Part

• Human-Computer Interaction through Interfaces
  Main objective: Introduction to basic topics of graphical user interface design and human-computer interaction, presentation and the role of interactive systems and introduction to the concept of usability, historical overview of graphical interfaces and transdisciplinarity of the field
• Fundamental Concepts in Graphical User Interface Design
  Main objective: goals of graphical user interface design, important examples and achievements of the field, laws of design and usability of interactive systems, general principles and good design practices
• Development of Interactive Systems
  Main objective: study of the life cycle of interactive systems, development goals and methodologies, design patterns, the human-centered (user-centered) development model
• Interactive Systems Design
  Main objective: analysis of the design process, design guidelines and patterns, introduction to the concepts of prototypes, use cases and user groups, feedback and avoidance of information overload, subjective and objective evaluation of interaction and experience, quantitative and qualitative functionality testing and performance measurement, familiarity with cognitive perusal and compatibility with rules and existing conventions, feedback issues, ethics and ethics
• 3D Graphical User Interfaces
  Main objective: introduction to interactive and immersive interaction technologies, definitions, principles and concepts for virtual/augmented/mixed reality design, intelligent interfaces for virtual environments and virtual worlds, usability and applications, functional and multi-use features, introduction to the concept of realism , photorealistic rendering and avatars, perception and design complexity, and interaction methods and interaction
• Graphical User Interface for Social Networks
  Main objective: introduction to the fundamental concepts of interaction in social network applications, characteristics of social media, the social interaction design model, critical points and challenges in the design process and solutions/suggestions
• Alternative and Innovative Graphical User Interfaces
  Main objective: introduction to multi-touch interfaces, design methodology aimed at touchscreens and gestures, design and development methods and tools with resistive, capacitive and visual recognition, adaptability and personalization of content, accessibility and design challenges, the role of artificial intelligence and of machine learning

Laboratory Part

• Competition and Target Audience Research
  Main objective: literature review, study on evaluation and feedback platforms, crowd sourcing methodologies, use of analytics technologies and usage statistical visualization tools
• Communication with the Customer/Consumer
  Main objective: Study of contracts and creation of progress reports, scheduling and financial planning of development process, creation of personas and scenarios of use and evaluation
• Low Fidelity Prototyping
  Main objective: low-fidelity prototyping processes, the role of wireframes and good design practices, familiarity with software and online design platforms, interfacing with external repositories of user interaction graphics, designing graphical user interfaces for mobile devices and web applications, presentation and development in the Pencil Project
• High Fidelity Prototyping
  Main Objective: Familiarity with high-fidelity software and web-based prototyping platforms, designing graphical user interfaces for mobile devices and web applications, interfacing with external UI widget repositories, exporting to interactive stand-alone prototypes and web-executable applications, presenting and developing in Figma
• Graphical User Interface Design in Websites
  Main objective: prototyping technologies and platforms, familiarization with existing content management systems (CMS), installation and configuration of themes (templates/themes) and add-ons (plug-ins/add-ons), integration of analytics, visual online communication, presentation and development in Google Sites, WIX or Wordpress
• Design of 3D Interfaces
  Main objective: familiarity with interface design and programming software in 3D and virtual environments, study of interaction with 3D graphic elements, interface with external sources and content retrieval, presentation and 3D modeling of interface graphic elements (the case of Autodesk 3ds Max), photorealistic rendering graphics and interfacing with external repositories, adding and integrating user avatars in first and third person perspectives, presentation and programming of the graphical interface (the case of Unity 3D)
• Evaluation of Graphical User Interfaces
  Main objective: familiarization with evaluation methodologies through statistical analyses, use scenarios, interviews and questionnaires, synthesis of criteria and metrics, quantification of results, data visualization

The assessment process is based on individual assignments and laboratory exercises at key points in time for the course, each building on the derivatives of the previous one. After the end of each deadline, the students are invited to present the results and derivatives of their work and implementations, and to be examined based on their ability to answer the teacher's clarifying questions. Specifically for the evaluation process, it included:

• Laboratory exercises
• Paper assignment
• Presentation

Language: Greek