web-dev-qa-db-ja.com

Telerik Grid-CRUD操作用のフォームテンプレート編集フォーム

asp.net WebアプリケーションのCRUDオペレーションに Telerik Grid-Form Template Edit Form を使用しています。

enter image description here


しかし、Webデザイナーは、telerikコントロールには次のような多くの問題があると言っています。

  • ユーザーエクスペリエンス(ユーザーは(たとえば)[編集]をクリックして編集または挿入するフォームを表示するのではなく、最初からすべてのものを確認したい)
  • デザインのカスタマイズが難しい(特定のCSSを適用)
  • パフォーマンスの問題

UXの観点からTelerik controlsに問題がありますか?特にCRUD操作の代替手段は何ですか?

4

私はASP.NETおよびTelerikのコントロールを数年間直接使用しました。私はTelerikがあまり好きではありません。ここでは、これらの経験から得た洞察の一部を紹介します。

Telerikコントロールが提供する価値(私の意見では)は、UI/UXに強いまたは意欲がない開発者向けのドラッグアンドドロップの事前に作成されたユーザーコントロールです。これらの最も適切な対象読者は、ビジネスロジックに引き続き集中できるように、「十分な」UIを望んでいる開発者であると思います。

使いやすさ

良くも悪くも、ユーザビリティは本質的に固定されています。アイデアをホワイトボードに入れたり、創造的なワイヤフレームをブレインストーミングしたりする機会はほとんどありません。

これにより、チームのUI/UX思考プロセスが制限される可能性があります。問題を熟慮して解決策として創造的な概念を思い付く代わりに、デフォルトの主なアクションは、既存のツールのTelerikドキュメントを見て、それを実装することです。そのため、多くの場合、結果のUIは一般的なグリッドとフィルター、見苦しいグラフ、扱いにくいUXになります。

Telerikの技術的な問題

私が経験したいくつかのTelerik固有の問題は次のとおりです。

  • 独自の重複するjQueryリソースをロードしましたが、これは主なjQuery依存関係とは異なるバージョンでした。これが原因で、追跡が困難なバグが発生しました。
  • CSSスタイルは、変更可能な静的ファイルではなく、コンパイルされた.DLL内から動的に提供されました。
  • .NETのバックグラウンドを持たないWebデザイナーは、簡単な変更を行おうとすると、失われて欲求不満になることがよくありました。
  • チームがTelerikコントロールのカスタマイズを習得するために必要な時間と投資は非効率的でした。実際のビジネスロジックを構築したり、新しいUI/UX機能を実装したりするよりも、カスタマイズの実装と不注意によるバグ修正の解決にかなりの時間を費やしました。
  • UIの応答性が鈍くて膨らんだのは、それが原因でした。

推奨:バックエンド不可知論UI

Telerikおよびその他の.NET固有のUIツールは完全に回避することをお勧めします。適切に構築されたWebインターフェイス(クライアント側のブラウザー)は、使用されているサーバーフレームワークの種類(ASP.NET、Python、Ruby)に強く依存するべきではありません。非常に優れた汎用UIフレームワークが利用可能であり、これにより、さまざまなバックグラウンドの才能のあるWebデザイナーを自由に雇い、活用することができます。

既存のASP.NET Webアプリケーションをそのまま維持しながら、この方向に進むために実行できるいくつかの簡単な手順があります。

  • クリーンなMasterPageを作成し、.NET UIコントロール、スタイルシート、js(ASP.NETまたはTelerik)への参照をすべて削除します。代わりに、jQuery、Angular、Bootstrap(または代替[1])などのクライアント側ライブラリのみを使用してください。
  • カスタムUIを処理する個別のスタイルシートを作成し、Bootstrap defaultsをオーバーライドします
  • グリッドやリストなどを生成するには、Repeaterなどの一般的なASP.NETコントロールを使用します。これは他のプラットフォームのforループとほとんど同じで、Webデザイナーにはおなじみでしょう。また、C#/ VB開発者にはおなじみのツールです。開発者はHTMLリスト、テーブルなどを手動でコーディングできます。
  • WebMethodsまたはWebApiを使用して、ajaxを使用してUIから直接呼び出すことができるクリーンな.NETメソッドを作成できます。
  • 一度に1ページを新しいUIフレームワークMasterPageに移行します。

[1] = http://modernweb.com/2014/02/17/8-bootstrap-alternatives/

4
Ben Harrison

大幅に調整する準備ができていない限り、これを使用しないでください。UXの問題がたくさんあり、さらにWebデザイナーが言及した問題もあります。リストを作成することはできますが、時間がかかりすぎるので、Webデザイナーを信頼するようにお願いします。同僚にデモでいくつかの操作を実行してもらい、彼がやっているのを見守ってください。何かがおかしいことに気づくでしょう。これらの製品の問題は、例とは少し違うことをしたい、または完全に微調整したい場合、地獄になることです。

もちろんTelerikは非常に迅速なソリューションですが、特別なニーズに合わせて何かを調整したい場合は、ここの情報を使用しながら自分でコーディングすることを強くお勧めします https://stackoverflow.com/questions/578146/best -examples-of-crud-web-form-design 良いパターンについて。それが私の個人的な見方です。

とにかく、そのような製品を使用することは本当に妥協です。迅速な結果が得られ、メカニズムを頻繁にコーディングする必要はありません。しかし真実は、あなたはユーザーエクスペリエンスを制御できないということです。なぜなら、あなたはデザイナーではないため、それらのコンポーネントは非常に厳格だからです。

以下は、Telerikの代替となるコンポーネントベンダー/オープンソース/フリープロジェクトのリストです。どちらかがあなたに合っている場合は、ウェブデザイナーにご相談ください。

https://www.devexpress.com/Products/NET/Controls/ASP/

https://www.syncfusion.com/products/aspnet

http://www.componentone.com/Studio/Platform/ASPNETWebForms

http://www.infragistics.com/products/aspnet

https://jqueryui.com/

http://www.evolutility.org/

http://jqgrid.com/jqgrid/

等。

柔軟性の高いものもあれば、デザインを制御できるほど、ユーザーにとっても優れたものもあります。コーディングの問題を考慮せずに純粋なUXについて話す場合は、特別なニーズに合わせて何かを行ってください。

6
ArkDeus

「編集」ページを別の画面に表示するという選択肢がある場合は、単純な「グリッドの表示」->「編集」->「編集の確認」->「グリッドのパターンの表示」を使用できます。このパターンは非常にシンプルで十分にテストされており、カスタムコントロールを使用せずに実現できます。

別のオプションは、編集可能なコントロールを備えた「モーダル」ダイアログを表示することです。 Jiraはこのパターンを広く使用しています。これにより、ユーザーは同じ画面にとどまります。

3
Ram Sundar

そのサイトで遊んだ後、それはいくつかのUXの問題があることは明らかであり、あなたの投稿はあなたがそれについて変更できるものを制限するいくつかの技術的な制約があることを示唆しています。残念なことに、これは世の中にあるいくつかのツールではかなり一般的です-あなたは彼らがそれを機能させる方法に縛られています。

このスタックオーバーフローはユーザーエクスペリエンスに特化しており、特にこのTelerikグリッドはASP.netソリューションであるため、利用できる選択肢の数を制限する可能性があるため、代替手段に関する推奨事項を提示することは本当の意味ではありません。

3
SteveD

Telerik Grid-Form Template Edit Form を体験しているときに最初に気づいたのは、ユーザーが移動するたびに、テーブルの左端にある編集ボタンをクリックするのが難しいことです。マウスポインターを右から左に動かして各レコードを編集します(ほとんどのユーザーは右利きです)。ユーザーには重要な限られたコンテンツのみを提供する必要があり、最初にすべてのコンテンツを表示する必要はなく、すべてのコンテンツを1行で表示するのは不便です。

Telerikグリッドでは、 コンテンツテンプレート を実装してCRUD操作を実行し、以下の例のようにポップアップモデルとして詳細を取得できます。選択した詳細。そして、他のデータを台無しにする必要はありません。

enter image description here

詳細を取得するための遅延は、パフォーマンスに関する主要な問題の1つだと思います。これは、革新的な読み込みアニメーションを追加してユーザーをアプリケーションに引き込むことで解決できます。

2