Although in recent years some progress in software engineering (SE) and human-computer interaction (HCI) has been made, there is still a gap between the two research areas and their methodologies. Today, from the engineering point of view, the specification and design of graphical user interfaces and their corresponding software architectural components is still a challenging task. The advanced component design methods are not yet integrated with HCI design methodologies to bridge the two fields. This paper presents a methodology, which extends a category-based software architectural design method by integrating HCI approaches. The methodology aims at a better design of Graphical User Interface (GUI) components in terms of both the architectural quality and usability. The methodology has been successfully evaluated in the development and partial reengineering of an e-commerce system.