The aim of this research is to measure the usability effectiveness of a web application by using card menus and tree menus using user-friendly criteria and access speed as indicated by the number of clicks made by the user. The method used in this research is the Task-centered User Interface method, where this method allows for planning and evaluating the arrangement of the interface according to user needs. There are four stages in this method, including user identification by conducting needs analysis, the second phase is user interface design. The third phase is the implementation of the card menu and tree menu design, and the fourth face is testing the usability and effectiveness requirements. From the research that has been carried out regarding measuring the effectiveness of using card menus, it is more effective to use than tree menus because you can directly lift the menu and access it. Meanwhile, for usability, the card menus have a higher usability index than the tree menus. Meanwhile, for usability measurements carried out by direct observation and distributing questionnaires, the resulting percentage of user understanding, ease, and speed for the card menu display was 87% and for the tree menu was 60% so that the card menu display was more accepted by users than the tree menu. The new thing provided by the results of this research is in the form of suggestions that can be used by web application developers to use the right type of menu in building web-based applications with the same specifications as in the case of school finance applications.