Uploaded byMohammed Fazuluddin
UI architecture & designing
The document discusses various concepts related to user interface (UI) design including UI architecture, design patterns, and principles. It covers topics such as the definition of a UI, common UI elements like windows and icons, levels of UI design, steps in the design process, common design models, concepts like simplicity and customization, and design patterns like MVC, MVP, and MVVM. The goal of UI design is to create an interface that is intuitive for users to interact with a software system through tasks like inputting and viewing output.
More Related Content
Similar to UI architecture & designing
UI architecture & designing
- 1. UI Designing concepts… @MohammedFazuluddin
- 2. UI Overview UI Architectureand Designing Concepts UI Design patterns
- 3. Before startingof the design lets understand the UI concepts as it is required to understand the designing concepts. User Interface (UI) mainly performs two functions − Accepting the user’s input. Displaying the output. Graphical user interface is also know as WIMP interface Windows − A rectangular area on the screen where the commonly used applications run. Icons − A picture or symbol which is used to represent a software application or hardware device. Menus − A list of options from which the user can choose what they require. Pointers − A symbol such as an arrow which moves around the screen as user moves the mouse. It helps user to select objects.
- 4. A gooduser interface must attract the user to use the software system without mistakes. It should help the user to understand the software system easily without misleading information. A bad UI may cause market failure against the competition of software system. The syntax comprises component types such as textual, icon, button etc. and usability summarizes the semantics of UI. The quality of UI is characterized by its look and feel (syntax) and its usability (semantics). There are basically two major kinds of user interface… Textual Graphical.
- 5. Users willinitially see the architecture of software system’s external user interface without considering its internal architecture. The UI design works from the user’s capabilities and limitations. While designing the UI, knowledge on the nature of user's work and environment is also critical. Before starting of the UI design we need to do some analysis on the following elements… Which type of users will interact with the system through the interface. What kind of tasks that end users will perform to do their work. What type of content will be presented as part of the interface. The work environment in which these tasks will be conducted.
- 7. Levels of UIDesign: The design of a user interface is divided into four different levels… The conceptual level − It describes the basic entities considering the user's view of the system and the actions possible upon them. The semantic level − It describes the functions performed by the system i.e. description of the functional requirements of the system, but does not address how the user will invoke the functions. The syntactic level − It describes the sequences of inputs and outputs required to invoke the functions described. The lexical level − It determines how the inputs and outputs are actually formed from primitive hardware operations.
- 8. Steps of UIDesign: User interface design is an iterative process, where all the iteration explains and refines the information developed in the preceding steps. General steps for user interface design… Defines user interface objects and actions (operations). Defines events (user actions) that will cause the state of the user interface to change. Indicates how the user interprets the state of the system from information provided through the interface. Describe each interface state as it will actually look to the end user.
- 9. User Interface designingmodels: There are four user interface designing models, find the details… User profile model: Created by a user or software engineer, which establishes the profile of the end- users of the system based on age, gender, physical abilities, education, goals, and personality. Considers syntactic and semantic knowledge of the user and classifies users as novices, knowledgeable intermittent, and knowledgeable frequent users.
- 10. Design model: Created by a software engineer which incorporates data, architectural, interface, and procedural representations of the software. Implementation model: Created by the software implementers who work on look and feel of the combined with all supporting information (books, videos, help files) that system syntax and semantics. User's mental model: Created by the user when interacting with the application. It contains the image the system that users carry in their heads. Often called the user's system perception and correctness of the description depends upon the user’s profile and overall familiarity with the software in the application domain.
- 12. User interface designconcepts: User centered: A user interface must be a user-centered product which involves users a product’s development lifecycle. The prototype of a user interface should be available to users and feedback from users, should be incorporated into the final product. Simple and Intuitive: UI provides simplicity and intuitiveness so that it can be used quickly and effectively without instructions. GUI are better than textual UI, as GUI consists of menus, windows, and buttons and is operated by simply using mouse.
- 13. Place Usersin Control: Do not force users to complete predefined sequences. Give them options—to cancel or to save and return to where they left off. Use terms throughout the interface that users can understand, rather than or developer terms. Provide users with some indication that an action has been performed, either by showing them the results of the action, or acknowledging that the action has taken place successfully. Transparency: UI must be transparent that helps users to feel like they are reaching right computer and directly manipulating the objects they are working with. The interface can be made transparent by giving users work objects rather than objects.
- 14. Use progressivedisclosure: Always provide easy access to common features and frequently used actions. less common features and actions and allow users to navigate them. Do not try to put every piece of information in one main window. Use secondary window for information that is not key information. Consistency: UI maintains the consistency within and across product, keep interaction results the same, UI commands and menus should have the same format, command punctuations should be similar and parameters should be passed to all in the same way. UI should not have behavior’s that can surprise the users and should include the mechanisms that allows users to recover from their mistakes.
- 15. Integration: Thesoftware system should integrate smoothly with other applications such as notepad and MS-Office. It can use Clipboard commands directly to perform data interchange. Component Oriented: UI design must be modular and incorporate component oriented architecture so that the design of UI will have the same requirements as the design of the main body of the software system. The modules can easily be modified and replaced without affecting of other of the system.
- 16. Customizable: Thearchitecture of whole software system incorporates plug-in modules, which allow many different people independently extend the software. It allows individual users to select from various available forms in order to suit personal preferences and needs. Reduce Users’ Memory Load: Do not force users to have to remember and repeat what the computer should doing for them. For example, when filling in online forms, customer names, addresses, and telephone numbers should be remembered by the system once a user has them, or once a customer record has been opened. User interfaces support long-term memory retrieval by providing users with for them to recognize rather than having to recall information.
- 17. There are3 main design patterns which we talk while designing the GUI. MVC(Model view controller) MVP(Model view presenter) MVVM(Model view view model) In traditional UI development - developer used to create a View using window or user control or page and then write all logical code (Event handling, initialization and data model, etc.) in code behind and hence they were basically making code as a part of view definition class itself. This approach increased the size of my view class and created a very strong dependency between my UI and data binding logic and business operations. In this situation, no two developers can work simultaneously on the same view and also one developer's changes might break the other code.
- 18.
- 19. So everythingis in one place is always a bad idea for maintainability, extendibility and testability prospective. If you look at the big picture, you can feel that all these problems exist because there is a very tight coupling between the following items. View (UI) Model (Data displayed in UI) Glue code (Event handling, binding, business logic). In case of MVC it is controller. In case of MVP it is presenter. In case of MVVM it is view model. MVC (model view controller), MVP (model view presenter) and MVVM (model view view model) patterns allow us to develop applications with loose coupling and separation of concern which in turn improve testability, maintainability and extendibility with minimum effort.
- 20. MVVM patternis a one of the best solutions to handle such problems for WPF and Silverlight application. MVP & MVC: MVP (model view presenter) pattern is one of the very popular patterns among other design patterns available in the market. MVP is a variation of MVC pattern which is being used for so many decades. Simple definition of MVP is that it contains three components: Model, View and presenter. So view is nothing but a UI which displays on the screen for user, the data it displays is the model, and the Presenter hooks the two together (View and model).
- 21.
- 22. MVP &MVC: In the MVC, the Controller is responsible for determining which View is displayed in response to any action including when the application loads. This differs from MVP where actions route through the View to the Presenter. In MVC, every action in the View basically calls to a Controller along with an action. In web application, each action is a call to a URL and for each such call there is a controller available in the application who respond to such call. Once that Controller has completed its processing, it will return the correct View. In case of MVP, view binds to the Model directly through data binding. In this case, it's the Presenter's job to pass off the Model to the View so that it can bind to it.
- 23.
- 24. MVVM (ModelView ViewModel): The MVVM pattern includes three key parts: Model (Business rule, data access, model classes) View (User interface (XAML)) ViewModel (Agent or middle man between view and model). In MVVM, ViewModel does not need a reference to a view. The view binds its control value to properties on a ViewModel, which, in turn, exposes data contained in model objects. In simple words, TextBox text property is bound with name property in ViewModel. Model and View work just like MVC and “ViewModel” is the model of the View.
- 25.
- 26. If you feelit is helpful and worthy to share with other people, please share the same